BootStrap学习笔记JS插件（一）--模态弹出框

一、弹出框基础

    

        

            

                ×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 用触发

点击我会弹出模态弹出窗


    

        

        
        
    

使用自带的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) {
    // 处理代码...
})

来自：BootStrap学习笔记JS插件（一）--模态弹出框 - Leo的日记本 - 博客园 (cnblogs.com)