Bootstrap模态框(Modal)插件

深碍√TFBOYSˉ_ 2022-05-28 01:59 304阅读 0赞

# Bootstrap模态框(Modal)插件 #

**1.定义**

*  模态框(Modal)是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互。

**2.设置方法**

*  模态框设置"modal",一般给它赋予角色 role="dialog"
 *  模态框入口设置:通过data属性，在控制器元素(比如按钮或者链接)上设置data-toggle="modal",同时设置data-target="\#id"或者href="\#id"来指定要切换的的特定的模态框(带有id="id")

**3.弹出的内容设置**

*  盒子：添加类  modal-dialog
 *  内容：添加类  modal-content
 *  内容里面可以设置：

头部：添加类    modal-header

主体部分：添加类   modal-body

底部：添加类    modal-footer

*  关闭按钮(X)设置：close

给需要触发关闭模态框的按钮设置 data-dismiss="modal"既可以关闭模态框

*  给模态框设置 fade可以实现当模态框被切换时，它会引起内容淡入淡出
 *  模态框大小设置(大/默认/小)

大模态框： 给.modal设置  bs-example-modal-lg

给modal-dialog设置modal-lg

小模态框： 给.modal设置  bs-example-modal-sm

给modal-dialog设置modal-sm

//demo <div class="container"> <h2>创建模态框(Modal)</h2>  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" >×</button> <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4> </div> <div class="modal-body">在这里添加一些文本</div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">关闭</button> <button class="btn btn-primary">提交更改</button> </div> </div> </div> </div> </div>

**运行：**

![20180328090323961][]

**代码讲解：**

*  使用模态窗口，你需要有某种触发器,你可以使用按钮或者链接，这里我们使用的是按钮
 *  data-traget="\#myModal" 是你想要在页面上加载模态框的目标
 *  在模态框中需要注意两点：

(1)第一：" modal",是用来把<div>的内容识别为模态框

(2)第二： "fade",当模态框别触发时，它会引起模态框淡入淡出

*  class="close",close是一个CSS class，用于为模态框的关闭按钮设置样式
 *  data-dismiss="modal",是一个自定义HTML5data属性，在这里它被用于关闭模态框窗口
 *  data-toggle="modal",是用于打开模态框窗口

**选项：**

有一些选项可以用来定制模态窗口(Modal Window)的外观和感观，它们是通过data属性或JavaScript来传递的。下表列出的这些选项：

![20180328100309744][]

**方法：**

下面是一些可与modal()一起使用的方法：

![20180328100428142][]

今天就分享到这里啦~~~~

参考教程：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

[20180328090323961]: /images/20220528/e5907f9443134591bfee626b6279466a.png
[20180328100309744]: /images/20220528/c9730ec2462c4368ad76540fb3026883.png
[20180328100428142]: /images/20220528/9646b8e6f4d6488caabf099af8efc1a2.png