參考網(wǎng)址：http://v3.bootcss.com/（能抄不寫）

1、大模態(tài)框

圖片效果圖：

代碼：（button的屬性data-target對(duì)應(yīng)的是具體模態(tài)框的class）

<!-- Large modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

?

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">

? <div class="modal-dialog modal-lg" role="document">

? ? <div class="modal-content">

? ? ? ...

? ? </div>

? </div>

</div>

2、小模態(tài)框

圖片效果圖：

代碼：

<!-- Small modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

?

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

? <div class="modal-dialog modal-sm" role="document">

? ? <div class="modal-content">

? ? ? ...

? ? </div>

? </div>

</div>

?

3、我們的模態(tài)框

圖片效果圖

?

?

代碼：

<div class="modal fade" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">

<div class="modal-content">

<!--頭部開始-->

<div class="modal-header">

<!--關(guān)閉按鈕-->

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

　　　　<span aria-hidden="true">&times;</span>

　　</button>

<!--標(biāo)題-->

<h4 class="modal-title">Modal title</h4>

</div>

<!--頭部結(jié)束-->

<!--內(nèi)容開始-->

<div class="modal-body">

<p>One fine body&hellip;</p>

</div>

<!--內(nèi)容結(jié)束-->

<!--底部開始-->

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

<!--底部結(jié)束-->

</div>

<!-- /.modal-content -->

</div>

<!-- /.modal-dialog -->

</div>

<!-- /.modal -->

?

4、禁止掉動(dòng)畫：如果你不需要模態(tài)框彈出時(shí)的動(dòng)畫效果（淡入淡出效果），刪掉?.fade?類即可。

?

5、js手動(dòng)切換、打開、關(guān)閉模態(tài)框

$('#myModal').modal('toggle');

$('#myModal').modal('show');

$('#myModal').modal('hide');

?

6、ps注意：

（1）不支持同時(shí)打開多個(gè)模態(tài)框；

（2）模態(tài)框的 HTML 代碼放置的位置，也就是說，盡量作為 body 標(biāo)簽的直接子元素。

?

轉(zhuǎn)載于:https://www.cnblogs.com/chengmingxiaowu/p/7610082.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap-模态框 modal.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。