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>

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