全面解析Bootstrap彈窗的實現方法_javascript技巧

　　Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：

　　☑ 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕

　　☑ 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容

　　☑ 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕

 
 
 
 ×Close
 
模態彈出窗標題
 
 
 
模態彈出窗主體內容
 
 
 關閉
 保存
 
 
 

二 . data-toggle類觸發彈窗(無需寫JS)

1 . 模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target.

通過data-target觸發


 
 
 
 ×Close
 
模態彈出窗標題
 
 
 
模態彈出窗主體內容
 
 
 關閉
 保存
 
 
 

2 . data-參數說明

　　除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。

三 . JS觸發彈窗(要寫JS)

　　1 . 除了使用自定義屬性觸發模態彈出框之外，還可以通過JavaScript方法來觸發模態彈出窗。通過給一個元素一個事件，來觸發。比如說給一個按鈕一個單擊事件，然后觸發模態彈出窗。

HTML:

點擊我

 
 
 
 ×Close
 
模態彈出窗標題
 
 
 
模態彈出窗主體內容
 
 
 關閉
 保存
 
 
 

JS:

2 . 使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括

屬性設置:

參數設置:

事件設置：

四 . 彈窗尺寸

Bootstrap框架還為模態彈出窗提供了不同尺寸.

　　一個是大尺寸樣式"modal-lg”.

 ... 

　　另一個是小尺寸樣式"modal-sm”.

 ... 

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com