模态框 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显示当前模态窗

 

      大对话框 
      

          

               

                    

                        
                             × 
                        
                        
大对话框 
                    
                    

                        
在弹出框显示的过程会有一个过渡效果大对话框宽度 
                    
                    

                        关闭 
                        保存 
                    
               
          
      
      小对话框 
      

          

               

                    

                        
                             × 
                        
                        
小对话框 
                    
                    

                        
在弹出框显示的过程会有一个过渡效果小对话框宽度 
                    
                    

                        关闭 
                        保存 
                    
               
          
      
 

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

 https://www.cnblogs.com/xszjk/articles/5517937.html