bootstrap中的模態(tài)框（modal），不同于Tooltips，模態(tài)框以彈出對話框的形式出現(xiàn)，具有最小和最實用的功能集。務(wù)必將模態(tài)框的 HTML 代碼放在文檔的最高層級內(nèi)（也就是說，盡量作為 body 標(biāo)簽的直接子元素），以避免其他組件影響模態(tài)框的展現(xià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)框為對話框。為 .modal-dialog 添加 aria-hidden="true" 屬性。通過 aria-describedby 屬性為模態(tài)框 .modal 添加描述性信息。關(guān)閉動畫如果你不需要模態(tài)框彈出時的動畫效果（淡入淡出效果），刪掉 .fade 類即可。
通過按鈕屬性顯示不同內(nèi)容當(dāng)有一堆按鈕，都要觸發(fā)相同的模態(tài)框(如：向好友列表中某個人發(fā)消息)，只是有用戶ID不同，那么可以使用data-whatever配合event.relatedtarget來實現(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>通常不需寫 JavaScript 代碼也可激活模態(tài)框。通過在一個起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" rel="external nofollow" 屬性，用于指向被控制的模態(tài)框。通過JavaScript調(diào)用modal通常只需一行 JavaScript 代碼，即可通過元素的 id myModal 調(diào)用模態(tài)框：
$('#myModal').modal(options)JavaScript參數(shù)：
可以將選項通過 data 屬性或 JavaScript 代碼傳遞。對于 data 屬性，需要將參數(shù)名稱放到 data- 之后，例如 data-backdrop=""。
調(diào)用示例
1.將頁面中的某塊內(nèi)容作為模態(tài)框激活。
接受可選參數(shù) object。
$('#myModal').modal({ keyboard: false})2.手動打開或關(guān)閉模態(tài)框。在模態(tài)框顯示或隱藏之前返回到主調(diào)函數(shù)中（也就是，在觸發(fā) shown.bs.modal 或 hidden.bs.modal 事件之前）。$('#myModal').modal('toggle')
3.手動打開模態(tài)框。在模態(tài)框顯示之前返回到主調(diào)函數(shù)中 （也就是，在觸發(fā) shown.bs.modal 事件之前）。$('#myModal').modal('show')
4.手動隱藏模態(tài)框。在模態(tài)框隱藏之前返回到主調(diào)函數(shù)中 （也就是，在觸發(fā) hidden.bs.modal 事件之前）。$('#myModal').modal('hide')
5.更新模態(tài)框，在模態(tài)框動態(tài)添加或刪除內(nèi)容時：$('#myModal').modal('handleUpdate')
綁定事件
Bootstrap 的模態(tài)框類提供了一些事件用于監(jiān)聽并執(zhí)行你自己的代碼。
如：
$('#myModal').on('hidden.bs.modal', function (e) { // do something...})總結(jié)
以上所述是小編給大家介紹的BootStrap中的模態(tài)框（modal，彈出層）功能示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
