Bootstrap3 模态框使用实例

这篇文章主要介绍了Bootstrap3 模态框的使用实例,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

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

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

实例

静态

     ×
Modal title
 
One fine body…
 CloseSave changes

动态

  Launch demo modal     ×
Modal title
 ...  CloseSave 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  CloseSave 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 模态框使用实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

以上就是Bootstrap3 模态框使用实例的详细内容，更多请关注本站其它相关文章！