全面解析Bootstrap彈窗的實(shí)現(xiàn)方法
一. 結(jié)構(gòu)分析
Bootstrap框架中的模態(tài)彈出框，分別運(yùn)用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分：
☑ 彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕
☑ 彈出框主體，一般使用“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">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</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">關(guān)閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
二 . data-toggle類觸發(fā)彈窗(無(wú)需寫JS)
1 . 模態(tài)彈出窗聲明，只需要自定義兩個(gè)必要的屬性：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">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</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">關(guān)閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>
2 . data-參數(shù)說明
除了通過data-toggle和data-target來控制模態(tài)彈出窗之外，Bootstrap框架針對(duì)模態(tài)彈出框還提供了其他自定義data-屬性，來控制模態(tài)彈出窗。
三 . JS觸發(fā)彈窗(要寫JS)
1 . 除了使用自定義屬性觸發(fā)模態(tài)彈出框之外，還可以通過JavaScript方法來觸發(fā)模態(tài)彈出窗。通過給一個(gè)元素一個(gè)事件，來觸發(fā)。比如說給一個(gè)按鈕一個(gè)單擊事件，然后觸發(fā)模態(tài)彈出窗。
HTML:
<button class="btn btn-primary" type="button">點(diǎn)擊我</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">模態(tài)彈出窗標(biāo)題</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">關(guān)閉</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)彈出窗時(shí)，Bootstrap框架提供了一些設(shè)置，主要包括
屬性設(shè)置:
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false
});
});
});
參數(shù)設(shè)置:
事件設(shè)置：
$('#myModal').on('hidden.bs.modal', function (e) {
// 處理代碼...
})
四 . 彈窗尺寸
Bootstrap框架還為模態(tài)彈出窗提供了不同尺寸.
一個(gè)是大尺寸樣式"modal-lg”.
<divclass="modal-dialog modal-lg"> <divclass="modal-content"> ... </div> </div>
另一個(gè)是小尺寸樣式"modal-sm”.
<divclass="modal-dialog modal-sm"> <divclass="modal-content"> ... </div> </div>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是關(guān)于Bootstrap彈窗的實(shí)現(xiàn)方法的全部介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。
- Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題的解決方法
- Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問題
- Bootstrap modal 多彈窗之疊加顯示不出彈窗問題的解決方案
- BootStrap modal模態(tài)彈窗使用小結(jié)
- Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框 非彈窗
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- bootstrap實(shí)現(xiàn)彈窗和拖動(dòng)效果
- weebox彈出窗口不居中顯示的解決方法
相關(guān)文章
JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)教程
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)教程的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript實(shí)現(xiàn)可終止輪詢請(qǐng)求的方法
輪詢請(qǐng)求就是間隔相同的時(shí)間（如5s）后不斷地向服務(wù)端發(fā)起同一個(gè)接口的請(qǐng)求，當(dāng)然不能無(wú)限次去請(qǐng)求，所以輪詢必須要有個(gè)停止輪詢的機(jī)制，今天通過本文給大家介紹JavaScript實(shí)現(xiàn)可終止的輪詢請(qǐng)求，感興趣的朋友一起看看吧2022-06-06
JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫彈出層效果
本文給大家介紹的是是一款javascript彈出層特效,支持點(diǎn)擊觸發(fā)js彈出層,滑過觸發(fā)js彈出層,帶動(dòng)畫效果js彈出層,可自定義函數(shù)回調(diào)js彈出層。2015-05-05
JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)底部彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)硪黄鷍s封裝的一些jquery方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
js AppendChild與insertBefore用法詳細(xì)對(duì)比
本篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的對(duì)比。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)菜單跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
JavaScript defineProperty如何實(shí)現(xiàn)屬性劫持
雙向數(shù)據(jù)綁定的核心方法,主要是做數(shù)據(jù)劫持操作(監(jiān)控?cái)?shù)據(jù)變化),下面這篇文章主要給大家介紹了關(guān)于JavaScript defineProperty如何實(shí)現(xiàn)屬性劫持的相關(guān)資料,需要的朋友可以參考下2021-07-07
javascript-簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)步驟分解(附圖)
輸入內(nèi)容的判斷，對(duì)于事件對(duì)象的來源的判斷以及數(shù)學(xué)運(yùn)算“+，-，*，/”的使用，感興趣的朋友可以學(xué)習(xí)下2013-05-05