Bootstrap3 模态框使用实例

前端之家收集整理的这篇文章主要介绍了Bootstrap3 模态框使用实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

调用 $('#myModal').on('shown.bs.modal',function () { $('#myInput').focus() })*

实例

静态

动态

可选尺寸

使用方法

通过data属性

通过JavaScript调用

参数

Box-sizing: border-Box; font-size: 14px; max-width: 100%; border-top: rgb(238,238,238) 1px solid; font-family: 'microsoft yahei'; border-right: rgb(238,238) 1px solid; width: 1000px; vertical-align: baseline; background: none transparent scroll repeat 0% 0%; word-spacing: 0px; border-collapse: collapse; border-bottom: rgb(238,238) 1px solid; text-transform: none; outline-width: 0px; padding-bottom: 0px; padding-top: 0px; outline-style: none; padding-left: 0px; margin: 0px; border-spacing: 0px; border-left: rgb(238,238) 1px solid; widows: 1; letter-spacing: normal; outline-color: invert; padding-right: 0px; text-indent: 0px; -webkit-text-stroke-width: 0px"> 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: 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: 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: 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; 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">backdropBox-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">keyboardBox-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">showBox-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

猜你在找的Bootstrap相关文章