簡介BootStrap model彈出框的使用
之前，我們講解了bootstrap tab的使用，今天我們來了解下bootstrap 中model彈出窗的使用。
效果：
代碼：
<input id="btntext" type="button" value="添加文本組件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/> <!-- Modal --> <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"></div> </div>
很簡單吧，這樣就可以了。
注意：data-target屬性，指向了model的id，所以點(diǎn)擊按鈕，model就會(huì)彈出來了。
當(dāng)然你也可以用js來控制。
如下代碼：
顯示：$('#myModal').modal('show');
隱藏：$('#myModal').modal('hide');
開關(guān)：$('#myModal').modal('toogle');
事件: $('#myModal').on('hidden', function () {// do something…});
注意：我這邊用到了href屬性，這是讓model去 remote一個(gè)url。當(dāng)然 ，你可以把你要的內(nèi)容，直接寫在model-body里面。
認(rèn)真看model的div結(jié)構(gòu)，你就會(huì)明白，model-body是代表內(nèi)容，model-header是頭部，那么如果要在底部加兩個(gè)按鈕，那么就得用下面的代碼了。
<div class="modal-footer"> <a href="#" class="btn">關(guān)閉</a> <a href="#" class="btn btn-primary">保存</a> </div>
注意：如果要給model設(shè)置寬度，那必須得加上布局。就是把model放在下面的代碼塊中，并且設(shè)置model的寬度。style="width:500px".對了，你還不可以用span樣式直接放到class里面。。
<div class="container"></div>
以上所述是小編給大家介紹的BootStrap model彈出框的使用，希望對大家有所幫助！
- Bootstrap實(shí)現(xiàn)帶動(dòng)畫過渡的彈出框
- Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解
- JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼
- Bootstrap每天必學(xué)之彈出框（Popover）插件
- BootStrap的select2既可以查詢又可以輸入的實(shí)現(xiàn)代碼
- JS組件Bootstrap Select2使用方法解析
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【三】下拉列表Select2插件的使用
- JS組件Bootstrap Select2使用方法詳解
- BootStrap下的彈出框加載select2框架失敗的解決方法
相關(guān)文章
類型斷言是一種方式，可以手動(dòng)指定變量的類型，非空斷言是一種類型斷言的特殊形式，這篇文章主要給大家介紹TypeScript 中的類型斷言和非空斷言的使用方法,需要的朋友可以參考下2023-07-07
javascript KeyDown、KeyPress和KeyUp事件的區(qū)別與聯(lián)系
KeyDown、KeyPress和KeyUp事件的區(qū)別與聯(lián)系,以后就可以根據(jù)需求來選擇使用。2009-12-12
js對圖片base64編碼字符串進(jìn)行解碼并輸出圖像示例
這篇文章主要介紹了js對圖片base64編碼字符串進(jìn)行解碼并輸出圖像的具體實(shí)現(xiàn)，大家可以參考下面的示例2014-03-03
JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
在本章中，我們將分析Prototypejs中關(guān)于JavaScript繼承的實(shí)現(xiàn),需要的朋友可以參考下2016-10-10
javaScript(JS)替換節(jié)點(diǎn)實(shí)現(xiàn)思路介紹
獲取要替換的節(jié)點(diǎn),這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈2013-04-04
這篇文章為大家主要介紹了js獲取url參數(shù)值的幾種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-07-07
element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)的示例代碼
這篇文章主要介紹了element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài),代碼部分分為dom部分和data部分及css部分,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設(shè)置他們的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
小程序?qū)崿F(xiàn)抽獎(jiǎng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)抽獎(jiǎng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12