模態框 modal data-toggle data-target

1. Data-*屬性 模態框(modal) 觸發事件(data-toggle) 觸發對象data-target(ID 或類)

2. 關閉所有data事件$(document).off(“.data-api”);

關閉某個data事件$(document).off(“.button.data-api”)

3. 接受三種不同類型的參數：

$(‘#myModal’).modal()

$(‘#myModal’).modal({keyboard:false})

$(‘#myModal).modal(‘show’)

4. 事件：$(‘#myModal’).on(‘show.bs.modal’,function(e){…})

獲取版本信息：$.fn.tooltip.Constructor.VERSION

5. Modal>modal-dialog>modal-content>modal-header(>modal-title)+modal-body+modal-footer

模態框大小modal-lg(大) modal-sm(小)  默認表示正常

Data屬性:data-toggle=”modal”  data-target=” #ID(.類)”

6. data-backdrop (true[單擊黑色背景會關閉當前彈窗] false[單擊不變背景並不會關閉當前彈窗] static[單擊黑色背景並不會關閉當前彈窗]])

Data-keyboard(true[不變背景按ESC按不會關閉當前彈窗]  false[黑色背景按ESC會關閉當前彈窗])

Data-show顯示當前模態窗

 <div class="container">
      <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal-lg" data-backdrop="static">大對話框 </button>
      <div class="modal fade" id="myModal-lg">
          <div class="modal-dialog modal-lg">
               <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">
                             <span aria-hidden="true">× </span>
                        </button>
                        <h4 class="modal-title">大對話框 </h4>
                    </div>
                    <div class="modal-body">
                        <p>在彈出框顯示的過程會有一個過渡效果大對話框寬度 </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button>
                        <button type="button" class="btn btn-primary">保存 </button>
                    </div>
               </div>
          </div>
      </div>
      <a href="#" id="btnDialog">小對話框 </a>
      <div class="modal fade" id="myModal-sm">
          <div class="modal-dialog modal-sm">
               <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">
                             <span aria-hidden="true">× </span>
                        </button>
                        <h4 class="modal-title">小對話框 </h4>
                    </div>
                    <div class="modal-body">
                        <p>在彈出框顯示的過程會有一個過渡效果小對話框寬度 </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button>
                        <button type="button" class="btn btn-primary">保存 </button>
                    </div>
               </div>
          </div>
      </div>
 </div>
<script type="text/javascript" src="js/jquery-2.2.3.min.js" > </script>
<script type="text/javascript" src="js/bootstrap.min.js" > </script>
<script language="JavaScript">
     $(document).ready(function(){
         $('#btnDialog').click(function(){
              $('#myModal-sm').modal({
                   backdrop:"static"
              });
         });
     });
 </script>

7.  事件 show.bs.modal在模態框彈出前執行  shown.sb.modal在模態框彈出后執行

Hide.bs.modal在模態框隱藏前執行 hidden.bs.modal在模態框隱藏后執行

$(‘#myModal-sm’).modal(“toggle”)   $(‘#myModal-sm’).modal(“show”)

$(‘#myModal-sm’).on(‘show.sb.modal’,function(e){
           Alert(“show.bs.modal”);
});

8. 下拉菜單綁定事件 $('#dropMenu').dropdown("toggle");

事件: show.bs.dropdown  shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

$(‘#.dropdown’).on(‘show.sb.modal’,function(){
           Alert(“show.bs.dropdown”);
});