BootStrap modal模態彈窗使用小結

NO IMAGE

模態彈窗

觸發元素基本結構:

複製程式碼 程式碼如下:<button class=”btn btn-success” data-target=”#modal” data-toggle=”modal”>modal</button>

內容元素基本結構:


<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times</button>
title
</div>
<div class="modal-body">
this is main content
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">cancel</button>
<button class="btn btn-success">ok</button>
</div>
</div>
</div>
</div>

  觸發元素的關鍵屬性為data-target和data-toggle,data-target和具體的彈窗互相對應,data-toggle=”modal”提供了HTML觸發條件

  彈窗內容要正確巢狀,彈窗的出現和隱藏的動畫要設定在最外層

  可以通過modal-sm和modal-lg改變彈窗的大小,這兩個class要設定在modal-dialog那一層

  modal-header中的關閉按鈕的關鍵屬性為class=”close”該class實現了樣式的改變,data-dismiss=”modal”提供了HTML關閉的觸發條件

模態彈窗提供了四個屬性,這四個屬性通常設定在模態彈窗上class=”modal”那一層(內容DOM的最外層),四個屬性分別為:

  1.data-backdrop:是否包含一個背景,預設值為true同時單擊背景可以關閉模態窗,設定為data-backdrop=”static”則單擊背景時不關閉,設定為backdrop=”false”則不存在背景

  2.data-keyboard:按下ESC時是否關閉模態窗預設值為true即按下時關閉模態窗,設定為data-keyboard=”false”則在點選ESC時不再關閉模態窗(該屬性要想生效要在最外層設定屬性tabindex)

  3.data-show:初始化時是否顯示預設值為true即初始時顯示,data-show=”false”則初始化時不顯示第一次點選觸發元素準備模態窗,在點選一次開始顯示模態窗

  4.href:載入其他內容

JS使用方法

  模態窗提供了四個事件:

  1.show.bs.modal在顯示之前觸發

  2.shown.bs.modal在顯示之後觸發

  3.hide.bs.modal在隱藏之前觸發

  4.hidden.bs.modal在隱藏之後觸發

使用方式為:


$("#modal").on("shown.bs.modal",function(){
alert("already show")
})

  如果我們在模態窗中使用了input表單元素,如果需要在每次顯示模態窗是input可以獲取焦點,就需要使用shown.bs.modal了

  模態彈窗也提供勒三個引數:

  1.toggle切換模態窗的顯示隱藏

  2.show顯示模態窗

  3.hide隱藏模態窗

使用方式為:

$(“#modal”).modal(“show”)

  模態窗提供的四個屬性同樣可以通過JS方式來使用,用JS使用時四個屬性分別為:backdrop、keyboard、show、remote

  使用方式為:


$("#modal").modal({
backdrop:"static",
keyboard:false,
show:false
})

更多內容請點選專題《Bootstrap Modal使用教程》進行學習,希望大家喜歡。

如果大家還想深入學習,可以點選這裡進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

Bootstrap modal 多彈窗之疊加關閉陰影遮罩問題的解決方法Bootstrap modal 多彈窗之疊加引起的滾動條遮罩陰影問題Bootstrap modal 多彈窗之疊加顯示不出彈窗問題的解決方案Bootstrap編寫一個在當前網頁彈出可關閉的對話方塊 非彈窗BootStrap的彈出框(Popover)支援滑鼠移到彈出層上彈窗層不隱藏的原因及解決辦法bootstrap實現彈窗和拖動效果全面解析Bootstrap彈窗的實現方法weebox彈出視窗不居中顯示的解決方法