參考網址：http://v3.bootcss.com/（能抄不寫）

1、大模態框

圖片效果圖：

代碼：（button的屬性data-target對應的是具體模態框的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、小模態框

圖片效果圖：

代碼：

<!-- 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、我們的模態框

圖片效果圖

?

?

代碼：

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

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

<div class="modal-content">

<!--頭部開始-->

<div class="modal-header">

<!--關閉按鈕-->

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

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

　　</button>

<!--標題-->

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

</div>

<!--頭部結束-->

<!--內容開始-->

<div class="modal-body">

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

</div>

<!--內容結束-->

<!--底部開始-->

<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>

<!--底部結束-->

</div>

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

</div>

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

</div>

<!-- /.modal -->

?

4、禁止掉動畫：如果你不需要模態框彈出時的動畫效果（淡入淡出效果），刪掉?.fade?類即可。

?

5、js手動切換、打開、關閉模態框

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

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

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

?

6、ps注意：

（1）不支持同時打開多個模態框；

（2）模態框的 HTML 代碼放置的位置，也就是說，盡量作為 body 標簽的直接子元素。

?

轉載于:https://www.cnblogs.com/chengmingxiaowu/p/7610082.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。