模态框modal

modal这玩意是含在bootstrap里面，作用和对话框Dialog差不多，但是它不存z-index的问题，反正就是一层一层叠在上面，新生成的模态框会把下面模态框则挡住。特别适合编辑有很多的业务场景

step0:引用bootstrap的css和js

step1: 定义模态框（尼玛。。。其实就是个加modal样式的div）

<div class="modal fade" id="select-contract-modal" role="dialog">
    <div class="modal-dialog" style="width: 900px; ">
        <div class="modal-content">
            <div class="modal-header" style="height:50px;">
               顶部
            </div>
            <div class="modal-body" style="height:500px;">

                中部
            </div>

<div class="footer" style="height:50px;">

                底部
            </div>
        </div>
    </div>
</div>

step2:按键（可能其它页面元素）与模态框关联，一点击模态框就出现了。

<input type="button"  value="选 择" data-toggle="modal" data-target="#select-contract-modal" onclick="initModal()"></input>

反正bootstrap的js库和css样式里面有大量 data-toggle 和 data-target操作涉及，有兴趣可以去研究，反正就是bootstrap的套路，背下来就OK了。这样一点击按钮，模态框就出现了。

initModal()就是对模态框（擦。。其实就是modal类样式的div）的初始化。其实就是一段js，执行对模态框里dom元素的初始化即可。

另外还可以用js是模态框弹出来：

$("#select-contract-modal").modal();

step3:关闭模态框，B装完了，调用JS把模态框隐藏即可

（1） 通过js实现关闭

$("#select-contract-modal").modal('hide');

这段js一般可以放到sweetAlert插件或者alert的确认退出按钮的回调中执行，例如问下用户您是否要退出模态框，确认按钮回调执行这段js即可。

（2）通过模态框自定义属性（类似data-toggle）实现

<button data-dismiss="modal" type="button" class="btn btn-default">取消</button>，这标签一般可以放在模态框的footer模块中，作为取消按钮

模态框中还可以继续嵌入模态框，这样就可以子子孙孙无穷尽也，实现一层一层的编辑和询问