一. 結構分析
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：
☑ 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕
☑ 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容
☑ 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕
<div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->
二 . data-toggle類觸發彈窗(無需寫JS)
1 . 模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target.
<!-- data-target觸發模態彈出窗元素 --><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發</button><!-- 模態彈出窗內容 --><div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div></div>
2 . data-參數說明
除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。
三 . JS觸發彈窗(要寫JS)
1 . 除了使用自定義屬性觸發模態彈出框之外，還可以通過JavaScript方法來觸發模態彈出窗。通過給一個元素一個事件，來觸發。比如說給一個按鈕一個單擊事件，然后觸發模態彈出窗。
HTML:
<button class="btn btn-primary" type="button">點擊我</button><div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->
JS:
$(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });2 . 使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括
屬性設置:
$(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:false }); });});參數設置:
事件設置：
$('#myModal').on('hidden.bs.modal', function (e) { // 處理代碼...})四 . 彈窗尺寸
Bootstrap框架還為模態彈出窗提供了不同尺寸.
一個是大尺寸樣式"modal-lg”.
<divclass="modal-dialog modal-lg"> <divclass="modal-content"> ... </div></div>
另一個是小尺寸樣式"modal-sm”.
<divclass="modal-dialog modal-sm"> <divclass="modal-content"> ... </div></div>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程
以上就是關于Bootstrap彈窗的實現方法的全部介紹，希望對大家的學習有所幫助。
新聞熱點
疑難解答
