淺析BootStrap模態(tài)框的使用(經(jīng)典)

更新時(shí)間：2016年04月29日 10:22:13 作者：CQ_LQJ

Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。本文給大家介紹BootStrap模態(tài)框的使用，感興趣的朋友一起學(xué)習(xí)吧

BootStrap模態(tài)框簡單概述

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

1,Bootstrap 模態(tài)對話框和簡單使用

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>對話框標(biāo)題</h3>
</div>
<div class="modal-body">
<p>對話框主體</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)對話框，這是簡單的用法：

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

微信小程序事件點(diǎn)擊跳轉(zhuǎn)頁面的五種方法小結(jié)
本文主要介紹了微信小程序事件點(diǎn)擊跳轉(zhuǎn)頁面的五種方法小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
js控制滾動條緩慢滾動到頂部實(shí)現(xiàn)代碼
滾動條緩慢滾動到頂部這樣的效果想必大家在瀏覽網(wǎng)頁的時(shí)候都有見過吧，本文使用js實(shí)現(xiàn)下，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你
2013-03-03
用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下
2014-12-12
JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求
當(dāng)我們在開發(fā)時(shí)遇到需要同時(shí)發(fā)起百條接口請求怎么辦呢,本文主要來和大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求,需要的可以參考下
2024-03-03
談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)
這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記8)的相關(guān)資料,需要的朋友可以參考下
2015-12-12
JavaScript實(shí)現(xiàn)簡單圖片輪播效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單圖片輪播效果，點(diǎn)擊下標(biāo)切換到該圖片上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Day.js常用方法集合(附各種事件格式的轉(zhuǎn)換)
dayjs是一個(gè)輕量的處理時(shí)間和日期的JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于Day.js常用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
Bootstrap表格制作代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap表格的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
js word表格動態(tài)添加代碼
最近聽說了一個(gè)名詞word宏編程。自己也學(xué)習(xí)了一下js動態(tài)添加word表格
2010-06-06
微信小程序自定義組件
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08