一. 結構分析
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:
<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彈跳視窗的實現方法的全部介紹,希望對大家的學習有所幫助。