[筆記] Bootstrap Modal 互動視窗 操作指南和除錯

Bootstrap 算是網頁設計中常見的套件框架了,以下是Modal(互動視窗)初次實作時遇到的一些故障排除和經驗分享。
web development


Modal 是什麼?

網頁中用來增加「對話視窗、用戶提示」的跳出式選單,原本的網頁會變暗顯示。如下圖:
modal example

實作步驟

1. 請先加載以下的必要程式碼,其中包含 Bootstrap 本身的CSS, JavaScript 以及 jQuery。

2. 接著,載入 Modal 的相關原始碼如下:

標明紅字的部份,是 Button 點擊後,會觸發對應的浮動視窗(Modal)。換言之,若你有多個浮動視窗,每個浮動視窗和按鈕都必須要有獨一無二的 ID 做連結。否則,你會發現跑迴圈時,點出來的資料都是一模一樣的。


參考資料

1. Stack Overflow 上的討論串
2. Bootstrap Modal 中文說明

按讚加入粉絲團

延伸閱讀