利用bootstrap插件实现模态盒效果

今天我们选择使用bootstrap库著名的modal box插件modal.js来实现modal box效果，同时让大家更加熟悉bootstrap插件的使用。

A.bootstrap插件简介

1.介绍

当我们使用bootstrap库时，导入的文件bootstrap.js或bootstrap.min.js就是bootstrap插件文件，它集成了所有的bootstrap插件。区别在于*.min.js是压缩版本。

在使用bootstrap的js插件时，我们不需要做更多的工作，我们只需要导入这两个文件中的一个。另外，重要的信息是bootstrap的所有插件都依赖于jquery库，所以在介绍bootstrap的插件时，首先要导入jquery库。

如果只使用bootstrap库的某个插件，在不想引入所有插件时，可以选择独立引入某个插件。此方法要求您使用单独的插件文件。bootstrap有12个js插件。您可以从github下载每个插件的单独文件。

另外，bootstrap有以下12个插件，大家可以大致了解一下：

animation Transitions): transition . js Modal): Modal . js Dropdown):drop down . js scroll spy):scroll spy . js Tab):Tab . js提示。tooltop.js弹出框(popup): popup.js警告框(Alert): alert.js按钮(Buttons): button.js折叠/手风琴(Collapse): collapse.js照片转盘：carousel.js自动定位浮标词缀：词缀. js2插件用法介绍

Bootstrap提供了一个非常方便的API来调用插件，也就是数据属性。我们不需要编写大量的js代码，只需要在HTML标签中添加data-*属性，就可以调用js插件实现各种效果。

例如，如果我们想将下拉菜单效果绑定到按钮上，我们只需要在按钮上添加data-toggle='dropdown '属性，当按钮被点击时，下拉插件就会被调用。

当然，我们也可以使用bootstrap提供的纯javascript API来调用插件，例如，用id test调用按钮绑定的下拉插件操作，我们可以使用下面的js代码：

$('#test ')。下拉列表(选项)/可选参数选项二。模态盒插件

Bootstrap模式框插件是modal.js的，使用了以下样式组件：莫代尔盒子。模式-对话框模式框体。模态内容模态框内容。模式标题模式框内容标题(标题)。模态标题模态框标题。模态-正文模态框内容主要内容部分。模态-页脚模态框内容底部(可放置操作按钮等。)模态箱的结构类似如下

H1 modal box是一个值得学习的好效果/h1 button class=' btnbtn-success ' data-toggle=' modal ' data-target=' # modalone ' data-show=' false '加油！/button div class=' modal fade ' id=' modalone ' div class=' modal-dialog ' div class=' modal-content ' div class=' modal-header ' button type=' button ' class=' clo Se ' data-miss=' modal ' span aria-hidden=' true '/span/button H4 class=' modal-title ' modal弹出窗口title/H4/div class=' modal-body ' pm modal框架body/p/div class=' modal-footer ' PS tyle='在模式框的底部，此外，可以使用链接标记a的href属性代替data-toggle来使用链接a作为触发器，但不建议这样做。

属性数据-target='#modalone '表示触发的模态窗口ID为modalone。一个页面可以有多个模态窗口触发器，但是一个触发器只能触发对应的模态框，而不能触发多个模态框。

以上两个数据属性是实现模态盒效应所必需的。

渐变格式类可以为模式框弹出窗口添加过渡效果。

关闭格式化类和数据关闭属性可以向模式框添加关闭按钮。

还有一些其他可选的数据属性，可以增强modal box的性能。如下所示：

数据背景是否包含背景DIV，以在单击背景时关闭模式框，当属性值为true时包括该背景，当属性值为静态时不包括该背景。当数据-键盘为真时，当按下键盘ESC键时，模式框关闭；当为假时，它不关闭；当data-show为真时，加载后不显示页面；当为false时，说明通过JS代码调用带有选项参数的插件可以达到与设置上述属性相同的效果。代码如下：

$ (function () {$(')。BTN ')。单击(function () {$ ('# modalone ')。modal ({backdrop: false，//相当于data-back drop keyboard : false，//相当于data-keyboard show: true，//相当于data-show remote: '' //相当于href}用标记a作为触发器)；});});最后，上述模态箱代码的效果如下：

未单击按钮时：

点击后：

一个简单的模态盒效果就完成了。

三.补充

JS代码调用插件，以及。modal()方法可以携带上述选项参数，并且还具有以下参数：模式(“切换”)手动切换模式框。模式(“显示”)手动打开模式框。模式(“隐藏”)手动关闭模式框。同时，模态盒插件还提供了以下hook事件函数，可以在JS代码中使用，丰富模态盒效果或者增加更多功能。

显示；bs；调用show方法时(显示之前)会立即触发modal如果一个元素被点击，它将被视为一个事件related target event show . bs . modal这个事件将在modal窗口完全显示给用户之后(以及CSS动画完成之后)被触发；如果单击某个元素，它将被用作与事件相关的目标事件hide.bs.modal，当调用hide方法时，它将立即触发hide . bs . modal(但隐藏尚未关闭)。这个事件会在模态弹出窗口完全隐藏后触发(CSS动画完成的很漂亮)。以上是使用bootstrap插件实现模态盒效果的简单介绍。希望对大家有帮助。如果你有任何问题，请给我留言。非常感谢您对我们网站的支持！