Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對話框(16)
Bootstrap自帶了很多JQuery插件，給用戶做前端開發(fā)提供了很大的方便。對于每一個插件，有2種引用方式：一是單獨(dú)引用，即使用Bootstrap的單獨(dú)*.js文件，這種方式需要注意的是一些插件和CSS組件可能依賴其他插件，所以單獨(dú)引用的時候，需要弄清楚這種包含關(guān)系一并引用；二是直接引用完整的bootstrap.js或者壓縮版的bootstrap.min.js，需要注意的是不能同時引用這2個文件。
Bootstrap自帶了很多基本的插件，包括模態(tài)對話框、標(biāo)簽切換、Tooltip提示工具等。首先來總結(jié)下模態(tài)對話框的使用。
0x01基本樣式
模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨(dú)的源的內(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>
效果如下：
幾點(diǎn)說明：
（1）使用模態(tài)窗口，需要有某種觸發(fā)器，可以使用按鈕或鏈接。這里我們使用的是按鈕。
（2）data-target="#myModal" 是想要在頁面上加載的模態(tài)框的目標(biāo)。
（3）在模態(tài)框中需要注意兩點(diǎn)：一是.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í)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解析使用js判斷只能輸入數(shù)字、字母等驗證的方法(總結(jié))
本篇文章對使用js判斷只能輸入數(shù)字、字母等驗證的方法進(jìn)行了總結(jié)介紹，需要的朋友參考下2013-05-05
基于構(gòu)造函數(shù)的五種繼承方法小結(jié)
下面小編就為大家?guī)硪黄跇?gòu)造函數(shù)的五種繼承方法小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Postman無法正常返回結(jié)果問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家分享了B/S(Web)實時通訊的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript使用localStorage判斷設(shè)置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過期，通過設(shè)置過期時間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過期，感興趣的可以了解一下2023-05-05
javascript中可以通過四個屬性獲得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面為大家解釋下各屬性的含義2014-06-06
JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時函數(shù)及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
微信小程序?qū)崿F(xiàn)拖動懸浮圖標(biāo)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖動懸浮圖標(biāo)效果,小程序上是實現(xiàn)拖動圖標(biāo),本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
javascript設(shè)計模式 – 橋接模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 橋接模式,結(jié)合實例形式分析了javascript橋接模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04