Bootstrap3 模態(tài)框使用實例
更新時間：2017年02月22日 11:46:07 作者：qq1214379009
這篇文章主要介紹了Bootstrap3 模態(tài)框的使用實例,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
不支持同時打開多個模態(tài)框
務(wù)必盡量將HTML代碼放置在模態(tài)框的body位置以避免其他組件影響模態(tài)框
*autofocus 對于模態(tài)框無效, 需要自己調(diào)用 $('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})*
實例
靜態(tài)
<div class="modal fade" tabindex="-1" role="dialog"> <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">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 changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
動態(tài)
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <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"> ... </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 changes</button> </div> </div> </div> </div>
可選尺寸
<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ... </div> </div> </div> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> ... </div> </div> </div>
禁用fade
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..."> ... </div>
使用柵格系統(tǒng)
僅需在body中使用 .rows
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<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="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</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 changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
使用方法
通過data屬性
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
通過JavaScript調(diào)用
$('#myModal').modal(options)
參數(shù)
| 名稱 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| backdrop | boolean 或 字符串 ‘static' | true | 設(shè)置為 static 時, 在點擊屏幕時不會關(guān)閉 |
| keyboard | boolean | true | 鍵盤上的 esc 鍵被按下時關(guān)閉模態(tài)框 |
| show | boolean | true | 模態(tài)框初始化之后就立即顯示出來 |
方法
模態(tài)框激活
.modal(options)
$('#myModal').modal({
keyboard: false
})
模態(tài)框觸發(fā)手動打開或者關(guān)閉
觸發(fā)在 shown.bs.modal 以及 hidden.bs.modal 事件之前
.modal('toggle')
手動打開模態(tài)框
觸發(fā)在 shown.bs.modal 之前
$('#myModal').modal('show')
手動隱藏模態(tài)框
觸發(fā)在 hidden.bs.modal 之前
$('#myModal').modal('hide')
事件
按照時間先后順序分別為 show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal
調(diào)用方式
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
以上所述是小編給大家介紹的Bootstrap3 模態(tài)框使用實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
ymPrompt的doHandler方法來實現(xiàn)獲取子窗口返回值的方法
今天在寫頁面時用到了ymPrompt的win方法來彈出一個窗口。由于要用到獲取子窗口返回來的值判斷是否刷新父窗口,在ymPrompt的組件Demo中一直沒有找到合適的方法實現(xiàn)2010-06-06
JavaScript控制語句及搭建前端服務(wù)器的過程詳解
這篇文章主要介紹了JavaScript控制語句及搭建前端服務(wù)器,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
JS實現(xiàn)選項卡插件的兩種寫法（jQuery和class）
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)選項卡插件的兩種寫法：jQuery和class，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Javascript中toFixed計算錯誤(依賴銀行家舍入法的缺陷)解決方法
這篇文章主要介紹了Javascript中toFixed計算錯誤(依賴銀行家舍入法的缺陷)解決方法，非常具有實用價值，需要的朋友可以參考下2017-08-08
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個對當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過JavaScript代碼來調(diào)用，使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個命令用得很多，酷炫的強大功能。2023-07-07
Javascript 實現(xiàn)復(fù)制（Copy）動作方法大全
現(xiàn)在瀏覽器種類也越來越多，諸如 IE、Firefox、Chrome、Safari等等，因此現(xiàn)在要實現(xiàn)一個js復(fù)制內(nèi)容到剪貼板的小功能就不是一件那么容易的事了。2014-06-06
layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子
今天小編就為大家分享一篇layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序?qū)崿F(xiàn)pdf、word等格式文件上傳的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)pdf,word等格式文件上傳的方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新
這篇文章主要介紹了js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax無刷新的具體實現(xiàn),需要的朋友可以參考下2014-02-02
前端點擊預(yù)覽圖片Viewer.js使用方法(簡單的操作)
這篇文章主要介紹了前端點擊預(yù)覽圖片Viewer.js使用的相關(guān)資料,Viewer.js是一款強大的圖片查看器,支持移動設(shè)備觸摸事件、響應(yīng)式、放大/縮小、旋轉(zhuǎn)、翻轉(zhuǎn)、移動、鍵盤操作、全屏幻燈片模式、縮略圖和標(biāo)題顯示等功能,需要的朋友可以參考下2025-01-01