不支持同时打开多个模态框
务必尽量将HTML代码放置在模态框的body位置以避免其他组件影响模态框
调用 $('#myModal').on('shown.bs.modal',function () {
$('#myInput').focus()
})*
实例
静态
One fine body…
仅需在body中使用 .rows
通过data属性
通过JavaScript调用
参数
Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; border-right: rgb(238,238) 1px solid; vertical-align: top; background: none transparent scroll repeat 0% 0%; border-bottom: rgb(238,238) 1px solid; outline-width: 0px; padding-bottom: 8px; text-align: left; padding-top: 8px; outline-style: none; padding-left: 8px; margin: 0px; border-left: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">名称 | Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">类型 | Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">默认值 | Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">描述 |
---|---|---|---|
Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-width: 0px; padding-bottom: 8px; padding-top: 8px; outline-style: none; padding-left: 8px; margin: 0px; border-left: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">backdrop | Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">boolean 或 字符串 ‘static'Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">trueBox-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">设置为 static 时,在点击屏幕时不会关闭Box-sizing: border-Box; font-size: 14px; border-top: 0px; border-right: 0px; vertical-align: baseline; background: none transparent scroll repeat 0% 0%; border-bottom: 0px; outline-width: 0px; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: 0px; outline-color: invert; padding-right: 0px">Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">keyboard | Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">booleanBox-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">键盘上的 esc 键被按下时关闭模态框Box-sizing: border-Box; font-size: 14px; border-top: 0px; border-right: 0px; vertical-align: baseline; background: none transparent scroll repeat 0% 0%; border-bottom: 0px; outline-width: 0px; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-left: 0px; outline-color: invert; padding-right: 0px">Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">show | Box-sizing: border-Box; font-size: 14px; border-top: rgb(238,238) 1px solid; outline-color: invert; line-height: 20px; padding-right: 8px">模态框初始化之后就立即显示出来
模态框激活
模态框触发手动打开或者关闭
触发在 shown.bs.modal 以及 hidden.bs.modal 事件之前
手动打开模态框
触发在 shown.bs.modal 之前
手动隐藏模态框
触发在 hidden.bs.modal 之前
按照时间先后顺序分别为 show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal
以上所述是小编给大家介绍的Bootstrap3 模态框使用实例。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/bootstrap/41388.html