在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。本文将详细介绍Bootstrap模态弹出框

结构分析

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

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

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

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

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

对于弹窗而言，modal-content是样式的关键。主要设置了弹窗的边框、边距、背景色和阴影等样式

触发方式

众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种

在介绍触发方式之前，首先要说明.show和.fade这两个方法。只有模态弹出窗默认是隐藏的，才能触发其显示

.fade {    opacity: 0;    -webkit-transition: opacity .15s linear;    -o-transition: opacity .15s linear;    transition: opacity .15s linear;}.show {    display: block!important;}

【方法一】

模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）

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

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

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

【方法二】

触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性

不过建议还是使用统一使用data-target的方式来触发

点击

尺寸

Bootstrap框架为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm”。其结构上稍做调整

[注意].bs-example-modal-lg和.bs-example-modal-sm是自定义的名称，而非必须

    
    
     
        
      
            
       
                
        
小火柴的蓝色理想
            
       
        
      
    
     
    

参数说明

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。有关Modal弹出窗自定义属性相关说明如下所示

该参数设置在按钮上，或者弹窗上都可以。出于方便，一般地，在按钮上设置

[注意]属性值一定要加引号，如data-backdrop="false"

如果想要支持esc键关闭弹窗，需要在弹窗上设置tabindex="-1"

默认样式无蒙版ESC失效弹窗默认不显示

JS触发

除了使用自定义属性data-触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。比如说给按钮设置一个单击事件，然后触发模态弹出窗

只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框

$('#myModal').modal()

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置

【属性设置】

模态弹出窗默认支持的自定义属性主要有

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

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

【参数设置】

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下