全面解析Bootstrap彈窗的實現(xiàn)方法

更新時間：2015年12月01日 10:54:54 作者：傻籽

這篇文章全面解析Bootstrap彈窗的實現(xiàn)方法，對其結(jié)構(gòu)進行詳細分析，感興趣的小伙伴們可以參考一下

一. 結(jié)構(gòu)分析

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

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

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

　　☑ 彈出框腳部，一般使用“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">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模態(tài)彈出窗標題</h4>
 </div>
 <div class="modal-body">
 <p>模態(tài)彈出窗主體內(nèi)容</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類觸發(fā)彈窗(無需寫JS)

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

<!-- data-target觸發(fā)模態(tài)彈出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發(fā)</button>
<!-- 模態(tài)彈出窗內(nèi)容 -->
<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">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模態(tài)彈出窗標題</h4>
 </div>
 <div class="modal-body">
 <p>模態(tài)彈出窗主體內(nèi)容</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-參數(shù)說明

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

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

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

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">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模態(tài)彈出窗標題</h4>
 </div>
 <div class="modal-body">
 <p>模態(tài)彈出窗主體內(nèi)容</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觸發(fā)模態(tài)彈出窗時，Bootstrap框架提供了一些設置，主要包括

屬性設置:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
 keyboard:false
 });
 });
});

參數(shù)設置:

事件設置：

$('#myModal').on('hidden.bs.modal', function (e) {
 // 處理代碼...
})

四 . 彈窗尺寸

Bootstrap框架還為模態(tài)彈出窗提供了不同尺寸.

　　一個是大尺寸樣式"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實戰(zhàn)教程

以上就是關于Bootstrap彈窗的實現(xiàn)方法的全部介紹，希望對大家的學習有所幫助。

您可能感興趣的文章:

JavaScript面向?qū)ο蟪绦蛟O計教程
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O計教程的相關資料,需要的朋友可以參考下
2016-03-03
JavaScript實現(xiàn)可終止輪詢請求的方法
輪詢請求就是間隔相同的時間（如5s）后不斷地向服務端發(fā)起同一個接口的請求，當然不能無限次去請求，所以輪詢必須要有個停止輪詢的機制，今天通過本文給大家介紹JavaScript實現(xiàn)可終止的輪詢請求，感興趣的朋友一起看看吧
2022-06-06
JS簡單實現(xiàn)動畫彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點擊觸發(fā)js彈出層,滑過觸發(fā)js彈出層,帶動畫效果js彈出層,可自定義函數(shù)回調(diào)js彈出層。
2015-05-05
JS實現(xiàn)移動端雙指縮放和旋轉(zhuǎn)方法
這篇文章主要介紹了JS實現(xiàn)移動端雙指縮放和旋轉(zhuǎn)方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-12-12
微信小程序?qū)崿F(xiàn)底部彈窗
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)底部彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
原生js封裝的一些jquery方法(詳解)
下面小編就為大家?guī)硪黄鷍s封裝的一些jquery方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
js AppendChild與insertBefore用法詳細對比
本篇文章主要是對js中AppendChild與insertBefore的用法進行了詳細的對比。需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
js實現(xiàn)菜單跳轉(zhuǎn)效果
這篇文章主要為大家詳細介紹了js實現(xiàn)菜單跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
JavaScript defineProperty如何實現(xiàn)屬性劫持
雙向數(shù)據(jù)綁定的核心方法,主要是做數(shù)據(jù)劫持操作(監(jiān)控數(shù)據(jù)變化),下面這篇文章主要給大家介紹了關于JavaScript defineProperty如何實現(xiàn)屬性劫持的相關資料,需要的朋友可以參考下
2021-07-07
javascript-簡單的計算器實現(xiàn)步驟分解(附圖)
輸入內(nèi)容的判斷，對于事件對象的來源的判斷以及數(shù)學運算“+，-，*，/”的使用，感興趣的朋友可以學習下
2013-05-05