Bootstrap模态窗体

Bootstrap模态窗体

开发工具与关键技术：DW、HTML、Bootstrap插件
作者：刘东标
撰写时间：2019-01-27

data-backdrop="static"单击背景不关闭弹出窗，默认值为data-backdrop=“true”

    <div class="h4 text-center">---------------------------------------模态弹出框--结构分析----------------------------------------</div>
    <!--Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和
        “modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
        ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
        ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
        ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮-->
    
    <!--对于一个模态弹出窗而言，modal-content才是样式的关键。其主要设置了弹出窗
        的边框、边距、背景色和阴影等样式。modal-content中的modal-header、modal-body
        和modal-footer三个部分主要控制一些间距的样式。而modal-footer都是用来放置按钮，
        所以底部还对包含的按钮做了一定的样式处理-->

    <!--bootstrap中的“模态弹出框”有以下几个特点：
    1、模态弹出窗是固定在浏览器中的。
    2、模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
    3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px(1024分辨率)。-->
    <!---->
    <!--两种尺寸选择：
    除此之外，Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，
        另一个是小尺寸样式“modal-sm”-->
   

    <div class="h4 text-center">---------------------------------------模态弹出框--触发模态弹出窗2种方法----------------------------------------</div>
    <!--模态弹出框--触发模态弹出窗2种方法-->
    <!--通过上面代码我们知道，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定
        的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种，
        接下来分别来介绍这2种触发模态弹出窗的使用方法。
        声明式触发方法：
        方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target
       （bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle=""
        或者 data-dismiss=""）-->
    <!--注意以下事项：
        1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；
        2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，
            一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。-->
   <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
    <div class="modal fade " id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">模态窗体</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <!--方法二：触发模态弹出窗也可以是一个链接<a>
    元素，那么可以使用链接元素自带的href属性替代data-target属性-->
      <a data-toggle="modal" href="#modals" class=" btn btn-primary">单击背景关闭弹出窗</a>
       <!-- 模态弹出窗 -->
    <div class="modal fade" id="modals" data-backdrop="static">
        <!--data-backdrop="static"单击背景不关闭弹出窗，默认值为data-backdrop="true"-->
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态弹出窗内容 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">模态窗体</h4>
                </div>
                <div class="modal-body">
                    <p>单击背景不关闭弹出窗</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>