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">&times;</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">&times;</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>

最后：触发事件 用的时候再过来取