一、弹出框基础

     
    
      
        
       
            
        
                
         ×Close                
         
模态弹出窗标题
            
        
            
        
                
         
模态弹出窗主体内容
            
        
            
        
                
         关闭                
         保存            
        
        
       
           
      
      
     
     

 

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

  ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

  ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

  ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

TIPS:.show{ display:block}

 

 二、弹出框大小

     
    
      
         //.modal-lg或.model-sm        
       
            
        
                
         ×Close                
         
模态弹出窗标题
            
        
            
        
                
         
模态弹出窗主体内容
            
        
            
        
                
         关闭                
         保存            
        
        
       
    
      
     

.modal-lg 为大弹出框；.model-sm为小弹出框

 

三、触发模态弹出框的两种方式

3.1 用data-target触发

点击我会弹出模态弹出窗
     
     
    
      
        
       
        
                
       
    
      
     

注意以下事项：

  1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

  2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

3.2 用<a>触发

点击我会弹出模态弹出窗
     
     
    
      
        
       
        
                
       
    
      
     

使用<a>自带的href属性替代data-target属性

 

四、弹出框增加动画效果

可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

 

五、data参数的使用

　　试验在触发按钮或弹出modal上设置，发现都可以使用。

 

六、javascript触发模态弹出框

     点击我
     
     
    
      
        
       
            
        
                
         ×Close                
         
模态弹出窗标题
            
        
            
        
                
         
模态弹出窗主体内容
            
        
            
        
                
         关闭                
         保存            
        
        
       
           
      
      
     
     

$(function(){  $(".btn").click(function(){    $("#mymodal").modal();  });});

6.1 参数设置一：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){    $(".btn").click(function(){        $("#mymodal").modal({            keyboard:false        });    });});

6.2 参数设置二：

6.3 事件设置

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

$('#myModal').on('hidden.bs.modal', function (e) {    // 处理代码...})