Bootstrap3 模态框使用实例

不支持同时打开多个模态框

务必尽量将HTML代码放置在模态框的body位置以避免其他组件影响模态框

*autofocus 对于模态框无效, 需要自己调用 $('#myModal').on('shown.bs.modal', function () {
 $('#myInput').focus()
})*

实例

静态

 

 

  

  ×
  
Modal title
  
  

  
One fine body…
  
  

  Close
  Save changes
  
 

 

动态

 Launch demo modal



 

 

  

  ×
  
Modal title
  
  

  ...
  
  

  Close
  Save changes
  
 
 

可选尺寸

Large modal

 

 

  ...
 
 


Small modal

 

 

  ...
 
 

禁用fade

 ...

使用栅格系统

仅需在body中使用 .rows

 

 

  

  ×
  
Modal title
  
  

  

   
.col-md-4
   
.col-md-4 .col-md-offset-4
  
  

   
.col-md-3 .col-md-offset-3
   
.col-md-2 .col-md-offset-4
  
  

   
.col-md-6 .col-md-offset-3
  
  

   

   Level 1: .col-sm-9
   

    

    Level 2: .col-xs-8 .col-sm-6
    
    

    Level 2: .col-xs-4 .col-sm-6
    
   
   
  
  
  

  Close
  Save changes
  
 

 

使用方法

通过data属性

Launch modal

通过JavaScript调用

$('#myModal').modal(options)

参数

名称	类型	默认值	描述
backdrop	boolean 或 字符串 ‘static'	true	设置为 static 时, 在点击屏幕时不会关闭
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框
show	boolean	true	模态框初始化之后就立即显示出来

方法

模态框激活

.modal(options)

$('#myModal').modal({
 keyboard: false
})

模态框触发手动打开或者关闭

触发在 shown.bs.modal 以及 hidden.bs.modal 事件之前

.modal('toggle')

手动打开模态框

触发在 shown.bs.modal 之前

$('#myModal').modal('show')

手动隐藏模态框

触发在 hidden.bs.modal 之前

$('#myModal').modal('hide')

事件

按照时间先后顺序分别为 show.bs.modal shown.bs.modal hide.bs.modal  hidden.bs.modal

调用方式

$('#myModal').on('hidden.bs.modal', function (e) {
 // do something...
})

以上所述是小编给大家介绍的Bootstrap3 模态框使用实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！