Bootstrap模态框(Modal)插件

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>
    <!--模态框(Modal)-->
    <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>

运行：

代码讲解：

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

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

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

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

选项：

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

方法：

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

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

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