簡介BootStrap model彈出框的使用
更新時間：2016年04月27日 10:02:56 作者：James wang
這篇文章主要介紹了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，所以點擊按鈕，model就會彈出來了。
當然你也可以用js來控制。
如下代碼：
顯示：$('#myModal').modal('show');
隱藏：$('#myModal').modal('hide');
開關：$('#myModal').modal('toogle');
事件: $('#myModal').on('hidden', function () {// do something…});
注意：我這邊用到了href屬性，這是讓model去 remote一個url。當然 ，你可以把你要的內容，直接寫在model-body里面。
認真看model的div結構，你就會明白，model-body是代表內容，model-header是頭部，那么如果要在底部加兩個按鈕，那么就得用下面的代碼了。
<div class="modal-footer"> <a href="#" class="btn">關閉</a> <a href="#" class="btn btn-primary">保存</a> </div>
注意：如果要給model設置寬度，那必須得加上布局。就是把model放在下面的代碼塊中，并且設置model的寬度。style="width:500px".對了，你還不可以用span樣式直接放到class里面。。
<div class="container"></div>
以上所述是小編給大家介紹的BootStrap model彈出框的使用，希望對大家有所幫助！
相關文章
類型斷言是一種方式，可以手動指定變量的類型，非空斷言是一種類型斷言的特殊形式，這篇文章主要給大家介紹TypeScript 中的類型斷言和非空斷言的使用方法,需要的朋友可以參考下2023-07-07
javascript KeyDown、KeyPress和KeyUp事件的區(qū)別與聯(lián)系
KeyDown、KeyPress和KeyUp事件的區(qū)別與聯(lián)系,以后就可以根據需求來選擇使用。2009-12-12
這篇文章主要介紹了js對圖片base64編碼字符串進行解碼并輸出圖像的具體實現，大家可以參考下面的示例2014-03-03
JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
在本章中，我們將分析Prototypejs中關于JavaScript繼承的實現,需要的朋友可以參考下2016-10-10
獲取要替換的節(jié)點,這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈2013-04-04
這篇文章為大家主要介紹了js獲取url參數值的幾種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
element-table表格中插入顏色塊顯示數據狀態(tài)的示例代碼
這篇文章主要介紹了element-table表格中插入顏色塊顯示數據狀態(tài),代碼部分分為dom部分和data部分及css部分,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設置他們的方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了小程序實現抽獎動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12