BootStrap中的模態(tài)框（modal，彈出層）功能示例代碼
bootstrap中的模態(tài)框（modal），不同于Tooltips，模態(tài)框以彈出對(duì)話框的形式出現(xiàn)，具有最小和最實(shí)用的功能集。務(wù)必將模態(tài)框的 HTML 代碼放在文檔的最高層級(jí)內(nèi)（也就是說(shuō)，盡量作為 body 標(biāo)簽的直接子元素），以避免其他組件影響模態(tài)框的展現(xiàn)或功能。
默認(rèn)的modal示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Modal</title>
<link rel="stylesheet" >
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
為 .modal 添加 role="dialog"，用于指定模態(tài)框?yàn)閷?duì)話框。為 .modal-dialog 添加 aria-hidden="true" 屬性。通過(guò) aria-describedby 屬性為模態(tài)框 .modal 添加描述性信息。關(guān)閉動(dòng)畫(huà)如果你不需要模態(tài)框彈出時(shí)的動(dòng)畫(huà)效果（淡入淡出效果），刪掉 .fade 類即可。
通過(guò)按鈕屬性顯示不同內(nèi)容當(dāng)有一堆按鈕，都要觸發(fā)相同的模態(tài)框(如：向好友列表中某個(gè)人發(fā)消息)，只是有用戶ID不同，那么可以使用data-whatever配合event.relatedtarget來(lái)實(shí)現(xiàn)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Modal</title>
<link rel="stylesheet" >
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">好友列表</div>
<div class="panel-body">
<div class="list-group" role="group" aria-label="好友列表">
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="張三">張三
</button>
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="李四">李四
</button>
<button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
data-whatever="王二">王二
</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // 觸發(fā)事件的按鈕
var recipient = button.data('whatever') // 解析出data-whatever內(nèi)容
var modal = $(this)
modal.find('.modal-title').text('Message To ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
</body>
</html>
通常不需寫(xiě) JavaScript 代碼也可激活模態(tài)框。通過(guò)在一個(gè)起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" rel="external nofollow" 屬性，用于指向被控制的模態(tài)框。通過(guò)JavaScript調(diào)用modal通常只需一行 JavaScript 代碼，即可通過(guò)元素的 id myModal 調(diào)用模態(tài)框：
$('#myModal').modal(options)
JavaScript參數(shù)：
可以將選項(xiàng)通過(guò) data 屬性或 JavaScript 代碼傳遞。對(duì)于 data 屬性，需要將參數(shù)名稱放到 data- 之后，例如 data-backdrop=""。
調(diào)用示例
1.將頁(yè)面中的某塊內(nèi)容作為模態(tài)框激活。
接受可選參數(shù) object。
$('#myModal').modal({
keyboard: false
})
2.手動(dòng)打開(kāi)或關(guān)閉模態(tài)框。在模態(tài)框顯示或隱藏之前返回到主調(diào)函數(shù)中（也就是，在觸發(fā) shown.bs.modal 或 hidden.bs.modal 事件之前）。$('#myModal').modal('toggle')
3.手動(dòng)打開(kāi)模態(tài)框。在模態(tài)框顯示之前返回到主調(diào)函數(shù)中 （也就是，在觸發(fā) shown.bs.modal 事件之前）。$('#myModal').modal('show')
4.手動(dòng)隱藏模態(tài)框。在模態(tài)框隱藏之前返回到主調(diào)函數(shù)中 （也就是，在觸發(fā) hidden.bs.modal 事件之前）。$('#myModal').modal('hide')
5.更新模態(tài)框，在模態(tài)框動(dòng)態(tài)添加或刪除內(nèi)容時(shí)：$('#myModal').modal('handleUpdate')
綁定事件
Bootstrap 的模態(tài)框類提供了一些事件用于監(jiān)聽(tīng)并執(zhí)行你自己的代碼。
如：
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
總結(jié)
以上所述是小編給大家介紹的BootStrap中的模態(tài)框（modal，彈出層）功能示例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- BootStrap點(diǎn)擊保存后實(shí)現(xiàn)模態(tài)框自動(dòng)關(guān)閉的思路(模態(tài)框)
- Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例
- 在iframe中使bootstrap的模態(tài)框在父頁(yè)面彈出問(wèn)題
- bootstrap多層模態(tài)框滾動(dòng)條消失的問(wèn)題
- Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼
- BootStrap的兩種模態(tài)框方式
- 擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框
- bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解
- ajax分頁(yè)效果（bootstrap模態(tài)框）
- bootstrap 模態(tài)框（modal）實(shí)現(xiàn)水平垂直居中顯示
相關(guān)文章
javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123，123.456，0xff 之類的數(shù)字格式。 其實(shí) js 格式還有很多數(shù)字格式類型，比如 1., .1 這樣的，也有 .1e2 這樣的。2014-05-05
JS實(shí)現(xiàn)網(wǎng)頁(yè)每隔3秒彈出一次對(duì)話框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)每隔3秒彈出一次對(duì)話框的方法,涉及JavaScript結(jié)合時(shí)間函數(shù)遞歸調(diào)用的相關(guān)技巧,非常簡(jiǎn)單,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
使用layui監(jiān)聽(tīng)器監(jiān)聽(tīng)select下拉框,事件綁定不成功的解決方法
今天小編就為大家分享一篇使用layui監(jiān)聽(tīng)器監(jiān)聽(tīng)select下拉框,事件綁定不成功的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
優(yōu)化javascript的執(zhí)行效率一些方法總結(jié)
本文為大家介紹下優(yōu)化javascript的執(zhí)行效率一些方法，個(gè)人感覺(jué)還不錯(cuò)，感興趣的朋友可以了解下2013-12-12
js根據(jù)屬性刪除對(duì)象數(shù)組里的相應(yīng)對(duì)象
這篇文章主要介紹了js根據(jù)屬性刪除對(duì)象數(shù)組里的相應(yīng)對(duì)象,需要的朋友可以參考下2023-07-07
javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子
這篇文章介紹了javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子，有需要的朋友可以參考一下2013-10-10
Ajax實(shí)現(xiàn)郵箱驗(yàn)證實(shí)例代碼
這篇文章介紹了Ajax實(shí)現(xiàn)郵箱驗(yàn)證的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
判斷JavaScript中的兩個(gè)變量是否相等的操作符
可能有些同學(xué)看到這個(gè)標(biāo)題就會(huì)產(chǎn)生疑惑，為什么我們要判斷JavaScript中的兩個(gè)變量是否相等，JavaScript不是已經(jīng)提供了雙等號(hào)“==”以及三等號(hào)“===”給我們使用了嗎2019-12-12
不得不分享的JavaScript常用方法函數(shù)集（下）
不得不分享的JavaScript常用方法函數(shù)集，幫助大家更好的學(xué)習(xí)javascript程序設(shè)計(jì)，有興趣的朋友可以參考一下2015-12-12
uniapp調(diào)用手機(jī)相機(jī)進(jìn)行拍照的兩種方式
這篇文章主要給大家介紹了關(guān)于uniapp調(diào)用手機(jī)相機(jī)進(jìn)行拍照的兩種方式,在uniapp中有多種方式可以調(diào)用相機(jī)進(jìn)行拍照,文中介紹了兩種方法,需要的朋友可以參考下2023-09-09