Bootstrap使用模态框

静态模态框：

<div class="modal fade" id="modal_test" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
             <h4 class="modal-title" id="myModalLabel">选择文件</h4>
          </div>
          <div class="modal-body">
          </div>

          <div class="modal-footer center clearfix">
               <button type="button" class="common_btn btn_cancel fl" data-dismiss="modal">取消</button>
               <button type="button" class="common_btn btn_confirm fr" data-dismiss="modal">确定</button>
         </div>
      </div>
   </div>
</div>

1）使用javascript来打开modal：

$('#modal_test').modal({backdrop: 'static'});

a.其中backdrop: 'static'  点击页面其他地方，模态框不会关闭；

b.{keyboard:false}  点击键盘上escapse也不会关闭模态框；

2）在html中关闭模态框：data-dismiss="modal" 

data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。

3）html中打开模态框：

data-toggle="modal"    HTML5 定制的 data 属性 data-toggle，用于打开模态窗口。

data-target="#myModal"

如：

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" 
   data-target="#myModal">
   开始演示模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  ×
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </h4>
         </div>
         <div class="modal-body">
            在这里添加一些文本
         </div>
      </div>
</div>

4）Show: .modal('show')手动打开模态框。

5）Hide: .modal('hide')手动隐藏模态框。

网址：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html讲的很好

6）Bootstrap使用模态框，模态框的显示监听事件和消失监听事件：

$('.tip_modal').on('hidden.bs.modal', function () {
    //执行一些动作...
 });

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
});
 还有show.bs.modal hide.bs.modal

事件类型 描述
show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

7)改变模态框大小：

在class=“modal-dialog”后面加上modal-sm（小） modal-lg（大）；

8)头部的关闭写的：

<div class="modal-header">  
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
</div>