Bootstrap3 模态框使用实例

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

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

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

实例

静态

<div tabindex="-1" role="dialog"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>Modal title</h4> </div> <div> <p>One fine body&hellip;</p> </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

动态

<!-- Button trigger modal --> <button type="button" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>Modal title</h4> </div> <div> ... </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div> </div> </div>

可选尺寸

<!-- Large modal --> <button type="button" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div role="document"> <div> ... </div> </div> </div> <!-- Small modal --> <button type="button" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div role="document"> <div> ... </div> </div> </div>

禁用fade

<div tabindex="-1" role="dialog" aria-labelledby="..."> ... </div>

使用栅格系统

仅需在body中使用 .rows

<div tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>Modal title</h4> </div> <div> <div> <div>.col-md-4</div> <div>.col-md-4 .col-md-offset-4</div> </div> <div> <div>.col-md-3 .col-md-offset-3</div> <div>.col-md-2 .col-md-offset-4</div> </div> <div> <div>.col-md-6 .col-md-offset-3</div> </div> <div> <div> Level 1: .col-sm-9 <div> <div> Level 2: .col-xs-8 .col-sm-6 </div> <div> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

使用方法

通过data属性

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过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... })