Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對話框(16)
Bootstrap自帶了很多JQuery插件，給用戶做前端開發(fā)提供了很大的方便。對于每一個插件，有2種引用方式：一是單獨引用，即使用Bootstrap的單獨*.js文件，這種方式需要注意的是一些插件和CSS組件可能依賴其他插件，所以單獨引用的時候，需要弄清楚這種包含關(guān)系一并引用；二是直接引用完整的bootstrap.js或者壓縮版的bootstrap.min.js，需要注意的是不能同時引用這2個文件。
Bootstrap自帶了很多基本的插件，包括模態(tài)對話框、標(biāo)簽切換、Tooltip提示工具等。首先來總結(jié)下模態(tài)對話框的使用。
0x01基本樣式
模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。Bootstrap Modals（模態(tài)框）是使用定制的JQuery插件創(chuàng)建的。它可以用來創(chuàng)建模態(tài)窗口豐富用戶體驗，或者為用戶添加實用功能。
下面是一個基本樣式：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>模態(tài)對話框</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>模態(tài)對話框基本</h1>
</div>
<button type="button" id="Open" class="btn btn-primary btn-lg btn-mymodal" data-toggle="modal"
data-target="#myModal">
打開模態(tài)框
</button>
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">標(biāo)題</h4>
</div>
<div class="modal-body">內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下：
幾點說明：
（1）使用模態(tài)窗口，需要有某種觸發(fā)器，可以使用按鈕或鏈接。這里我們使用的是按鈕。
（2）data-target="#myModal" 是想要在頁面上加載的模態(tài)框的目標(biāo)。
（3）在模態(tài)框中需要注意兩點：一是.modal，用來把 <div> 的內(nèi)容識別為模態(tài)框；二是 .fade class。當(dāng)模態(tài)框被切換時，它會引起內(nèi)容淡入淡出。
（4）<div class="modal-header">，modal-header 是為模態(tài)窗口的頭部定義樣式的類。
（5）class="close"，close 是一個 CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。
（6）data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。
（7）class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用于為模態(tài)窗口的主體設(shè)置樣式。
（8）class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用于為模態(tài)窗口的底部設(shè)置樣式。
（9）data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開模態(tài)窗口。
0x02 JS方式加載
除了上面通過屬性方式加載外，還可以通過JS方式加載模態(tài)對話框，下面是一個用戶登錄界面的簡單實現(xiàn)：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<style>
.col-center-block{
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<title>js加載例子</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>js加載模態(tài)對話框</h1>
</div>
<div>
<button type="button" class="btn btn-lg btn-primary btn-myModal" data-toggle="modal">彈出對話框</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog" style="width: 20%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">用戶登錄</h4>
</div>
<div class="modal-body">
<div>
<form>
<div class="form-group">
<label class="control-label" for="UserName">用戶名</label>
<input type="text" class="form-control" id="UserName" placeholder="用戶名">
</div>
<div class="form-group">
<label class="control-label" for="Password">密碼</label>
<input type="password" class="form-control" id="Password" placeholder="密碼">
</div>
<div class="form-group">
<label>
<input type="checkbox"> 下次自動登錄
</label>
<a href="#" class="pull-right">忘記密碼</a>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary form-control">登錄</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(".btn-myModal").click(function () {
$("#myModal").modal({
keyboard:true,
// remote:"../Alerts.html"
})
})
$("#myModal").on("hidden.bs.modal",function () {
// alert('test');
})
})
</script>
</body>
</html>
效果如下：
上面的例子包含了JS加載modal的過程，也包括了設(shè)置模態(tài)對話框?qū)挾取㈨憫?yīng)事件等內(nèi)容。modal方法結(jié)合一些參數(shù)來實現(xiàn)特殊效果：
（1）把內(nèi)容作為模態(tài)框激活。接受一個可選的選項對象：
$("#myModal").modal({
keyboard:true,
})
（2）狀態(tài)切換
$("#myModal").modal('toggle') //手動打開模態(tài)框。
$("#myModal").modal('hide') //手動隱藏模態(tài)框。
0x03 事件
Bootstrap模態(tài)對話框還定義了事件，通過“鉤子”的方式調(diào)用：
（1）show.bs.modal
在調(diào)用 show 方法后觸發(fā)：
$('#myModal').on('show.bs.modal', function () {
// 執(zhí)行一些動作...
})
（2）shown.bs.modal
當(dāng)模態(tài)框?qū)τ脩艨梢姇r觸發(fā)（將等待 CSS 過渡效果完成）：
$('#myModal').on('shown.bs.modal', function () {
// 執(zhí)行一些動作...
})
（3）hide.bs.modal
當(dāng)調(diào)用 hide 實例方法時觸發(fā)：
$('#myModal').on('hide.bs.modal', function () {
// 執(zhí)行一些動作...
})
（4）hidden.bs.modal
當(dāng)模態(tài)框完全對用戶隱藏時觸發(fā)：
$('#myModal').on('hidden.bs.modal', function () {
// 執(zhí)行一些動作...
})
上面用戶登錄的例子中事件部分代碼：
$("#myModal").on("hidden.bs.modal",function () {
alert('test');
})
當(dāng)模態(tài)框完全對用戶隱藏時，就會調(diào)用執(zhí)行這段JS代碼。
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript 空間坐標(biāo)的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
使用JavaScript檢測Firefox瀏覽器是否啟用了Firebug的代碼
在啟用Firebug的情況下訪問GMail會收到一個 Firebug會讓Gmail變慢 的警告，這是如何檢測的呢？這里就說說。2010-12-12
在使用uni-app完成掃碼功能時,有時需要聚焦文本框的同時,需要軟鍵盤消失,下面這篇文章主要給大家介紹了關(guān)于uniapp中input聚焦禁止軟鍵盤彈出的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
javascript 使用for循環(huán)時該注意的問題-附問題總結(jié)
所謂for循環(huán)就是重復(fù)的執(zhí)行一段代碼，for循環(huán)也是希望在創(chuàng)建循環(huán)時常會用到的工具，這篇內(nèi)容主要給大家介紹javascript 使用for循環(huán)時該注意的問題-附問題總結(jié)，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS ES6中的解構(gòu)，對解構(gòu)感興趣的同學(xué)，可以參考下2021-04-04
微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能
這篇文章主要介紹了小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了js實現(xiàn)的下拉框二級聯(lián)動效果,涉及JavaScript針對頁面元素的遍歷與節(jié)點操作相關(guān)技巧,需要的朋友可以參考下2016-04-04
函數(shù)就是一種封裝,由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)的定義和基本使用方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JS實現(xiàn)自動固定頂部的懸浮菜單欄效果,涉及JavaScript針對window.onscroll事件的響應(yīng)及頁面樣式動態(tài)變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
javascript函數(shù)的四種調(diào)用模式
本文詳細(xì)介紹了javascript函數(shù)的四種調(diào)用模式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01