Bootstrap基本插件学习笔记之模态对话框(16)

Bootstrap自带了很多JQuery插件，给用户做前端开发提供了很大的方便。对于每一个插件，有2种引用方式：一是单独引用，即使用Bootstrap的单独*.js文件，这种方式需要注意的是一些插件和CSS组件可能依赖其他插件，所以单独引用的时候，需要弄清楚这种包含关系一并引用；二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js，需要注意的是不能同时引用这2个文件。

Bootstrap自带了很多基本的插件，包括模态对话框、标签切换、Tooltip提示工具等。首先来总结下模态对话框的使用。

0x01基本样式

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。Bootstrap Modals（模态框）是使用定制的JQuery插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。 下面是一个基本样式：

效果如下：

上面的例子包含了JS加载modal的过程，也包括了设置模态对话框宽度、响应事件等内容。modal方法结合一些参数来实现特殊效果：

（1）把内容作为模态框激活。接受一个可选的选项对象：

（2）状态切换

0x03 事件

Bootstrap模态对话框还定义了事件，通过“钩子”的方式调用：

（1）show.bs.modal 在调用 show 方法后触发：

（2）shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）：

（3）hide.bs.modal 当调用 hide 实例方法时触发：

（4）hidden.bs.modal 当模态框完全对用户隐藏时触发：

上面用户登录的例子中事件部分代码：

当模态框完全对用户隐藏时，就会调用执行这段JS代码。

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!