(十三)模态框插件

本节知识点

• 基本使用
• 用法说明

(一)基本使用

• 使用模态框的弹窗组件需要三层DIV容器元素，分别是modal(模态声明层) dialog(窗口声明层)content(内容层)
• 在内容层里面又分为header(头部),body(主体),footer(注脚)

     

         

              

                   X
                  
这个就是标题
              
               

                   这个就是模拟框的内容
               
             

                 注册
                 登录
             
         
     

(二) 模态框自动隐藏，点击后显示

• data-toggle="modal" data-target="#modal1"
• id随意起名字

点击我显示




 X
这个就是标题


这个就是模拟框的内容

 

注册
登录
 

(三) 弹窗的大小

• modal-lg
• sm-lg

(四)可设置淡入淡出的效果

• class="fade"

(四) 在主体部分使用栅格系统

   

    

     

     
1
     
2
  
3
   
  
  

(五) 用法

• 第一种 data属性

data-toggle 表示触发的类型
data-target 表示触发的节点
data-backdrop 布尔或者static 默认就是true表示有遮罩层，要是false就表示没有.要是设置static就表示单击模态框以外的地方他也不消失
data-keyboard 布尔值 true 如果是true按esc则消失窗口 要是false就不消失
data-show 布尔值 默认就是true 要是true上来就显示，要是false上来就隐藏
href url路径 要是路径就在modal-content里面加载一次，要是#就取代data-target方法

data-toggle = " modal" data-target = "#modal1"  
 data-keyboard = "false"
 data-show = "false"
href="index.html"

• 第二种Jquery里面设置

 $("#mymodal").modal({
    show: true,
    backdrop : false,
    keyboard : false,
    remote : "index.html"
})

• 方法

toggle .modal('toggle'); 触发时反转切换状态
show .modal("show"); 触发时显示弹窗
hide .modal("hide"); 触发时关闭弹窗

  $("#btn1").on('click',function(){
  $("#modal").modal("show");
})

点击一个按钮弹出来一个模态框由上到下。

  Launch demo modal




  

    

      

        ×
        
Modal title
      
      

        ...
      
      

        Close
        Save changes