亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄 搜索
Bootstrap 基礎教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網格系統(tǒng) Bootstrap 網格系統(tǒng)實例：堆疊的水平 Bootstrap 網格系統(tǒng)實例：手機、平板電腦、臺式電腦 Bootstrap 網格系統(tǒng)實例：中型和大型設備 Bootstrap 響應式實用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導航欄 Bootstrap 導航元素 Bootstrap 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標題（Page Header） Bootstrap 字體圖標(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導航（Affix） Bootstrap 滾動監(jiān)聽（Scrollspy） Bootstrap 過渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
文字

Bootstrap 模態(tài)框（Modal）插件

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。

如果您想要單獨引用該插件的功能，那么您需要引用 modal.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

您可以切換模態(tài)框（Modal）插件的隱藏內容：

  • 通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態(tài)框（帶有 id="identifier"）。
  • 通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態(tài)框： 
    $('#identifier').modal(options)

實例

一個靜態(tài)的模態(tài)窗口實例，如下面的實例所示：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?模態(tài)框（Modal）插件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h2>創(chuàng)建模態(tài)框（Modal）</h2>
<!--?按鈕觸發(fā)模態(tài)框?-->
<button?class="btn?btn-primary?btn-lg"?data-toggle="modal"?
???data-target="#myModal">
???開始演示模態(tài)框
</button>

<!--?模態(tài)框（Modal）?-->
<div?class="modal?fade"?id="myModal"?tabindex="-1"?role="dialog"?
???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">
??????????????????&times;
????????????</button>
????????????<h4?class="modal-title"?id="myModalLabel">
???????????????模態(tài)框（Modal）標題
????????????</h4>
?????????</div>
?????????<div?class="modal-body">
????????????在這里添加一些文本
?????????</div>
?????????<div?class="modal-footer">
????????????<button?type="button"?class="btn?btn-default"?
???????????????data-dismiss="modal">關閉
????????????</button>
????????????<button?type="button"?class="btn?btn-primary">
???????????????提交更改
????????????</button>
?????????</div>
??????</div><!--?/.modal-content?-->
</div><!--?/.modal?-->

</body>
</html>

結果如下所示：

模態(tài)框（Modal）插件

代碼講解：

  • 使用模態(tài)窗口，您需要有某種觸發(fā)器。您可以使用按鈕或鏈接。這里我們使用的是按鈕。
  • 如果您仔細查看上面的代碼，您會發(fā)現在 <button> 標簽中，data-target="#myModal" 是您想要在頁面上加載的模態(tài)框的目標。您可以在頁面上創(chuàng)建多個模態(tài)框，然后為每個模態(tài)框創(chuàng)建不同的觸發(fā)器?，F在，很明顯，您不能在同一時間加載多個模塊，但您可以在頁面上創(chuàng)建多個在不同時間進行加載。
  • 在模態(tài)框中需要注意兩點：
    • 第一是 .modal，用來把 <div> 的內容識別為模態(tài)框。
    • 第二是 .fade class。當模態(tài)框被切換時，它會引起內容淡入淡出。
  • aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標題。
  • 屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見，直到觸發(fā)器被觸發(fā)為止（比如點擊在相關的按鈕上）。
  • <div class="modal-header">，modal-header 是為模態(tài)窗口的頭部定義樣式的類。
  • class="close"，close 是一個 CSS class，用于為模態(tài)窗口的關閉按鈕設置樣式。
  • data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用于關閉模態(tài)窗口。
  • class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用于為模態(tài)窗口的主體設置樣式。
  • class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用于為模態(tài)窗口的底部設置樣式。
  • data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開模態(tài)窗口。

選項

有一些選項可以用來定制模態(tài)窗口（Modal Window）的外觀和感觀，它們是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱 類型/默認值 Data 屬性名稱 描述
backdrop boolean 或 string 'static'
默認值：true 		data-backdrop 指定一個靜態(tài)的背景，當用戶點擊模態(tài)框外部時不會關閉模態(tài)框。
keyboard boolean
默認值：true 		data-keyboard 當按下 escape 鍵時關閉模態(tài)框，設置為 false 時則按鍵無效。
show boolean
默認值：true 		data-show 當初始化時顯示模態(tài)框。
remote path
默認值：false 		data-remote 使用 jQuery .load 方法，為模態(tài)框的主體注入內容。如果添加了一個帶有有效 URL 的 href，則會加載其中的內容。如下面的實例所示： 
<a?data-toggle="modal"?href="remote.html"?data-target="#modal">請點擊我</a>

方法

下面是一些可與 modal() 一起使用的有用的方法。

方法 描述 實例
Options: .modal(options) 把內容作為模態(tài)框激活。接受一個可選的選項對象。 
$('#identifier').modal({
keyboard:?false
})
Toggle: .modal('toggle') 手動切換模態(tài)框。 
$('#identifier').modal('toggle')
Show: .modal('show') 手動打開模態(tài)框。 
$('#identifier').modal('show')
Hide: .modal('hide') 手動隱藏模態(tài)框。 
$('#identifier').modal('hide')

實例

下面的實例演示了方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?模態(tài)框（Modal）插件方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模態(tài)框（Modal）插件方法</h2>

<!--?按鈕觸發(fā)模態(tài)框?-->
<button?class="btn?btn-primary?btn-lg"?data-toggle="modal"?data-target="#myModal">
???開始演示模態(tài)框
</button>

<!--?模態(tài)框（Modal）?-->
<div?class="modal?fade"?id="myModal"?tabindex="-1"?role="dialog"?
???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">
???????????????模態(tài)框（Modal）標題
????????????</h4>
?????????</div>
?????????<div?class="modal-body">
????????????按下?ESC?按鈕退出。
?????????</div>
?????????<div?class="modal-footer">
????????????<button?type="button"?class="btn?btn-default"?
???????????????data-dismiss="modal">關閉
????????????</button>
????????????<button?type="button"?class="btn?btn-primary">
???????????????提交更改
????????????</button>
?????????</div>
??????</div><!--?/.modal-content?-->
???</div><!--?/.modal-dialog?-->
</div><!--?/.modal?-->
<script>
???$(function?()?{?$('#myModal').modal({
??????keyboard:?true
???})});
</script>

</body>
</html>

結果如下所示：

模態(tài)框（Modal）插件方法

只需要點擊 ESC 鍵，模態(tài)窗口即會退出。

事件

下表列出了模態(tài)框中要用到事件。這些事件可在函數中當鉤子使用。

事件 描述 實例
show.bs.modal 在調用 show 方法后觸發(fā)。 
$('#identifier').on('show.bs.modal',?function?()?{
??//?執(zhí)行一些動作...
})
shown.bs.modal 當模態(tài)框對用戶可見時觸發(fā)（將等待 CSS 過渡效果完成）。 
$('#identifier').on('shown.bs.modal',?function?()?{
??//?執(zhí)行一些動作...
})
hide.bs.modal 當調用 hide 實例方法時觸發(fā)。 
$('#identifier').on('hide.bs.modal',?function?()?{
??//?執(zhí)行一些動作...
})
hidden.bs.modal 當模態(tài)框完全對用戶隱藏時觸發(fā)。 
$('#identifier').on('hidden.bs.modal',?function?()?{
??//?執(zhí)行一些動作...
})

實例

下面的實例演示了事件的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?模態(tài)框（Modal）插件事件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模態(tài)框（Modal）插件事件</h2>

<!--?按鈕觸發(fā)模態(tài)框?-->
<button?class="btn?btn-primary?btn-lg"?data-toggle="modal"?data-target="#myModal">
???開始演示模態(tài)框
</button>

<!--?模態(tài)框（Modal）?-->
<div?class="modal?fade"?id="myModal"?tabindex="-1"?role="dialog"?
???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">
???????????????模態(tài)框（Modal）標題
????????????</h4>
?????????</div>
?????????<div?class="modal-body">
????????????點擊關閉按鈕檢查事件功能。
?????????</div>
?????????<div?class="modal-footer">
????????????<button?type="button"?class="btn?btn-default"?
???????????????data-dismiss="modal">
???????????????關閉
????????????</button>
????????????<button?type="button"?class="btn?btn-primary">
???????????????提交更改
????????????</button>
?????????</div>
??????</div><!--?/.modal-content?-->
???</div><!--?/.modal-dialog?-->
</div><!--?/.modal?-->
<script>
???$(function?()?{?$('#myModal').modal('hide')})});
</script>
<script>
???$(function?()?{?$('#myModal').on('hide.bs.modal',?function?()?{
??????alert('嘿，我聽說您喜歡模態(tài)框...');})
???});
</script>

</body>
</html>

結果如下所示：

模態(tài)框（Modal）插件事件

正如上面實例所示，如果您點擊了 關閉 按鈕，即 hide 事件，則會顯示一個警告消息。

上一篇： 下一篇：