[笔记] 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 中文说明

按赞加入粉丝团

延伸阅读