BootStrap（三）模态框-蒲公英云

BootStrap（三）模态框

模态框作为一个很重要的组件具体使用如下

首先模态框的触发可能是一个按钮链接或一个事件

1.以按钮为例标签式触发
定义一个按钮这个按钮将是触发模态框

<button id="btn" class="btn btn-primary">模态框按钮</button>

然后定义模态框
首先定义一个div class为modal show为显示 fade淡入淡出定义id
内层div class为modal-dialog 定义窗体
内层div class为modal-content 定义内容
内层div class为modal-header 在这一层h标签 class为modal-title
在tile中定义关闭按钮
内层div class为modal-body 定义身体
内层div class为modal-footer 定义脚部

按钮触发：
在btn中添加 data-toggle=modal data-target=’#myModal’
基本完成

在button中还可添加如下属性完成一些操作
data-backdrop true/false/’static’ 背景是灰色点击背景模态框是否消失
data-keyboard true/false 按下esc是否关闭
href 远程的模态框内容

基本代码如下：

<button id="btn" class="btn btn-primary" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#myModal">模态框按钮</button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                       <span class="close" data-dismiss="modal">×</span>
                        模态框的标题
                    </h4>
                </div>
                <div class="modal-body">
                    模态框的身体
                </div>
                <div class="modal-footer">
                    模态框的脚部
                </div>
            </div>
        </div>
    </div>

上面介绍完了标签版本的下面用js控制的
**2.**js控制模态框
首先基本标签不变 btn标签将无用的属性去除就是一个普通标签

<button id="btn" class="btn btn-primary" >模态框按钮</button>

然后写 js
事件是模态框.modal()
可以直接在modal(‘show’)显示 modal(‘hide’)隐藏
也可以

[class为modal的div元素].modal({ 
        //其中的属性有：
        show:  true/false,  显示还是隐藏 
        backdrop: true/false/'static', 点击背景是否关闭
        keyboard: true/false   按下esc是否关闭
        remote: url   加载远程ul的模态框内容
       })

用js目的就是遇到事件触发模态框，不仅限于按钮现在用点击按钮模拟事件
具体代码如下：

<button id="btn" class="btn btn-primary" >模态框按钮</button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                       <span class="close" data-dismiss="modal">×</span>
                        模态框的标题
                    </h4>
                </div>
                <div class="modal-body">
                    模态框的身体
                </div>
                <div class="modal-footer">
                    模态框的脚部
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="/js/jquery-3.2.1.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript"> $("#btn").on('click',function(){ $('#myModal').modal({ show:true, backdrop:'static', keyboard:false }) }) </script>