Bootstrap 模态框(Modal)插件.pdfVIP

Bootstrap 模态框 （Modal ）插件 Bootstrap 模态框 （Modal ）插件 模态框 （Modal ）是覆盖在⽗窗体上的⼦窗体。通常，⽬的是显⽰来⾃⼀个单独的源 的内容， 以在不离开⽗窗体的情况下有⼀些互动。⼦窗体 提供信息、交互等。 如果您想要单独引⽤该插件的功能，那么您需要引⽤ modal.j s 。或 者，正如 Bootstrap 插件概览 ⼀章中所提到，您 以引⽤ bootstrap.js 或 压缩版的 bootstrap.min.js。 ⽤法 您 以切换模态框 （Modal ）插件的隐藏内容： 通过 data 属性：在控制器元素 （⽐如按钮或者链接）上设置属性 data- toggle= modal ，同时设置 data-target= #identifier 或 href= #identifier 来 指定要切换的特定的模态框 （带有 id=identifier ）。 通过 JavaScript ：使⽤这种技术，您 以通过简单的⼀⾏ JavaScript 来调⽤带 有 id=identifier 的模态框： $(#identifier).modal(options) 实例 ⼀个静态的模态窗⼜实例，如下⾯的实例所⽰： !DOCTYPE htmlhtmlhead title ootstrap 实例 - 模态框 （Modal）插件/title link href=/bootstrap/css/bootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/bootstrap/js/bootstrap.min.js/script/headb data-target=#myModal 开始演示模态框/button !-- 模态框 （Modal） --div class=modal fa aria-labelledby=myModalLabel aria-hidden=true div class=modal-dialog div class=modal-content div class=modal-header button type=button class=close data-dismiss=modal aria-hidden=true times; /button h4 class=modal-title id=myModalLabel 模态框 （Modal）标题 /h4 /div div class=modal-body 在这⾥添加⼀些⽂本 /div div class=modal-footer button type=button class=btn btn-default data-dismiss=modal关 /button button type=button class=btn btn-primary 提交更改 /button /div /div !-- / .modal-content --/div !-- / .modal --/div/ 结果如下所⽰： 代码讲解： 使⽤模态窗⼜，您需要有某种触发器。您 以使⽤按钮或链接。这⾥我们使⽤ 的是按钮。 如果您仔细查看上⾯的代码，您会发现在 button 标签中，data- target= #myModal 是您想要在页⾯上加载的模态框的⽬标。您 以在页⾯上 创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不 能在同⼀时间加载多个模块，但您 以在页⾯上创建多个在不同时间进⾏加 载。 在模态框中需要注意两点：