Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來(lái)創(chuàng)建模態(tài)窗口豐富用戶(hù)體驗(yàn)，或者為用戶(hù)添加實(shí)用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。

1,Bootstrap 模態(tài)對(duì)話(huà)框和簡(jiǎn)單使用

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>對(duì)話(huà)框標(biāo)題</h3>
</div>
<div class="modal-body">
<p>對(duì)話(huà)框主體</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">確定</a>
</div>
</div>

可以使用按鈕或鏈接直接調(diào)用模態(tài)對(duì)話(huà)框，這是簡(jiǎn)單的用法：

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a>

另外,當(dāng)你需要讓對(duì)話(huà)框能夠在每次打開(kāi)時(shí)表單數(shù)據(jù)清空,如下:

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表單操作

以上內(nèi)容是小編給大家介紹的BootStrap模態(tài)框的使用，希望對(duì)大家有所幫助，欲了解更多精彩內(nèi)容，敬請(qǐng)關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章:

相關(guān)文章

JS下載文件|無(wú)刷新下載文件示例代碼
JS下載文件的實(shí)現(xiàn)在網(wǎng)上可以找到很多教程，不過(guò)本文為大家介紹的是無(wú)刷新下載文件，貌似更酷一點(diǎn)是吧
2014-04-04
詳解ant-design-pro使用qiankun微服務(wù)
這篇文章主要介紹了ant-design-pro使用qiankun微服務(wù)詳解,其實(shí)微服務(wù)需要有主應(yīng)用和子應(yīng)用，?一個(gè)子應(yīng)用可以配置多個(gè)相關(guān)聯(lián)的主應(yīng)用,配置方法都是一樣的，對(duì)ant-design-pro微服務(wù)配置相關(guān)知識(shí)，感興趣的朋友一起看看吧
2022-03-03
javascript定義函數(shù)的方法
javscript中定義和聲明函數(shù)有三種方式：正常方法構(gòu)造函數(shù) 函數(shù)直接量。
2010-12-12
理解Javascript_10_對(duì)象模型
什么都不想說(shuō)，一段代碼兩張圖，解釋一切。注：在此之前請(qǐng)閱讀前面的系列博文
2010-10-10
js去除空格的12種實(shí)用方法
js去除空格的方法有很多，本文整理了12種比較實(shí)用方法在此與大家分享下
2013-11-11
JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
詳解JavaScript節(jié)流函數(shù)中的Throttle
函數(shù)節(jié)流，就是對(duì)會(huì)頻繁觸發(fā)的函數(shù)事件做一些限制，讓這些函數(shù)可以在每隔一定的時(shí)間或者每次滿(mǎn)足一定的條件下再觸發(fā)。一般我們會(huì)給他起一個(gè)名字throttle。也就是節(jié)流的意思。一般這樣的函數(shù)有 resize事件、ontouchmove事件等。
2016-07-07
JavaScript常用腳本匯總（二）
本文給大家分享的javascript常用腳本有把JavaScript中的偽數(shù)組轉(zhuǎn)換為真數(shù)組、JavaScript設(shè)置主頁(yè)功能、JavaScript收藏功能、javascript檢測(cè)元素是否支持某個(gè)屬性代碼、創(chuàng)建和使用命名空間，有需要的小伙伴們快來(lái)看看吧。
2015-03-03
js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
詳解CocosCreator中幾種計(jì)時(shí)器的使用方法
這篇文章主要介紹了CocosCreator中幾種計(jì)時(shí)器的使用方法，推薦使用schedule，功能多些，銷(xiāo)毀時(shí)還能自動(dòng)移除
2021-04-04