Bootstrap实现模态框

什么是模态框

模态框就是覆盖在父窗体上的子窗体，有点像弹出框，只不过这个弹出框是自己做出来的，可以显示自己设置的内容。

模态框的常用事件

目的	事件	实例
调用 show 方法后触发	show.bs.modal	$("#myModel").on(‘show.bs.modal’,function () {//执行的操作})
模态框对用户可见时触发	shown.bs.modal	$("#myModel").on(‘shown.bs.modal’,function () {//执行的操作})
调用 hide 实例方法时触发	hide.bs.modal	$("#myModel").on(‘hide.bs.modal’,function () {//执行的操作})
模态框完全对用户隐藏时触发	hidden.bs.modal	$("#myModel").on('hidden.bs.modal ',function () {//执行的操作})

实现

触发模态框的按钮

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModel">模态</button>

这个按钮其实可以是button,也可以是任意的其他标签，只要data-toggle、data-target对应就可以，例如使用a标签

<a data-toggle="modal" data-target="#myModel"> 查看照片</a>

模态框的设计

<!--模态框-->
  <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="content">
                <img src="../车体2.png" />
            </div>
        </div>
    </div>

触发模态框

 $("#myModel").on('show.bs.modal',function () {
            alert("进来了");    
 })