模态框 modal data-toggle data-target

模态框 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”);
});

非学，无以致疑；非问，无以广识

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”);
});