Bootstrap3 模态框使用实例

Bootstrap3 模态框使用实例

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

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

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

$('#myInput').focus()

})*

实例

静态

×

One fine body…

Close

Save changes

动态

Launch demo modal

×

...

Close

Save changes

可选尺寸

Large modal

...

Small modal

...

禁用fade

...

使用栅格系统

仅需在body中使用 .rows

×

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

键盘上http://的 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 模态框使用实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。