BootStrap学习(6)_模态框
生活随笔
收集整理的這篇文章主要介紹了
BootStrap学习(6)_模态框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、模態框
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。
如果只使用該功能，只引入BootStrap中的?modal.js即可
1.用法：
您可以切換模態框（Modal）插件的隱藏內容：
- 通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性?data-toggle="modal"，同時設置?data-target="#identifier"?或href="#identifier"?來指定要切換的特定的模態框（帶有 id="identifier"）。
- 通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框： $('#identifier').modal(options)
效果:
?代碼講解：
- 使用模態窗口，您需要有某種觸發器。您可以使用按鈕或鏈接。這里我們使用的是按鈕。
- 如果您仔細查看上面的代碼，您會發現在 <button> 標簽中，data-target="#myModal"?是您想要在頁面上加載的模態框的目標。您可以在頁面上創建多個模態框，然后為每個模態框創建不同的觸發器?，F在，很明顯，您不能在同一時間加載多個模塊，但您可以在頁面上創建多個在不同時間進行加載。
- 在模態框中需要注意兩點：
- 第一是?.modal，用來把 <div> 的內容識別為模態框。
- 第二是?.fade?class。當模態框被切換時，它會引起內容淡入淡出。
- aria-labelledby="myModalLabel"，該屬性引用模態框的標題。
- 屬性?aria-hidden="true"?用于保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。
- <div class="modal-header">，modal-header 是為模態窗口的頭部定義樣式的類。
- class="close"，close 是一個 CSS class，用于為模態窗口的關閉按鈕設置樣式。
- data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用于關閉模態窗口。
- class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用于為模態窗口的主體設置樣式。
- class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用于為模態窗口的底部設置樣式。
- data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開模態窗口。
選項: 在點出模態窗的按鈕上加上:data-backdrop='static' ?可以指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
2.事件
下表列出了模態框中要用到事件。這些事件可在函數中當鉤子使用。
| 事件 | 描述 | 實例 |
| show.bs.modal | 在調用 show 方法后觸發。 | $('#identifier').on('show.bs.modal', function () {// 執行一些動作... }) |
| shown.bs.modal | 當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。 | $('#identifier').on('shown.bs.modal', function () { // 執行一些動作... }) |
| hide.bs.modal | 當調用 hide 實例方法時觸發。 | $('#identifier').on('hide.bs.modal', function () { // 執行一些動作... }) |
| hidden.bs.modal | 當模態框完全對用戶隱藏時觸發。 | $('#identifier').on('hidden.bs.modal', function () { // 執行一些動作... }) |
?
?
?
?
?
?
?
?
?
?
?
?
?show方法:即彈出模態框事件
hide:方法:即關閉模態框事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body style="margin-top: 20px; margin-left: 20px;"><h3>創建模態框（Modal）</h3><!-- 按鈕觸發模態框 --><table class="table table-bordered"><thead><tr><th>書名</th><th>單價</th><th>操作</th></tr></thead><tbody><tr><td>三國演義</td><td>50</td><td><button class="btn btn-primary btn-lg" data-toggle="modal"data-target="#myModal" data-backdrop="static">修改</button></td></tr></tbody></table><!-- 模態框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="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">模態框（Modal）標題</h4></div><div class="modal-body"><table class="table table-condensed"><tr><td>書名:<input type="text" value="三國演義" />價格:<input type="text" value="50" /></td></tr></table></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 --></div><script>$(function () {$('#myModal').on('hide.bs.modal', function () {alert('真的要取消修改嗎...');})}); </script> </body> </html> View Code?
?
效果:
?
點關閉時會觸發事件。
三、提示工具
是基于BootStrap里面的(Tooltip)插件, 如果單單想用這個功能，可以直接用?tooltip.js這個插件.
當您想要描述一個鏈接的時候，提示工具（Tooltip）就顯得非常有用。
1.用法有兩種
? ?1.1?通過 data 屬性：如需添加一個提示工具（tooltip），只需向一個錨標簽添加?data-toggle="tooltip"?即可。錨的 title 即為提示工具（tooltip）的文本。默認情況下，插件把提示工具（tooltip）設置在頂部。
<a href="#" data-toggle="tooltip" title="提示信息">把鼠標停在我的上面</a>? 1.2?通過 JavaScript：通過 JavaScript 觸發提示工具（tooltip）：
$('#identifier').tooltip(options)注意: 您必須使用 jquery 激活它（讀取 javascript）。使用下面的腳本來啟用頁面中的所有的提示工具（tooltip）：
$(function () { $("[data-toggle='tooltip']").tooltip(); }); <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head> <body style="margin-top: 20px; margin-left: 20px;"><a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左側的 Tooltip">左側的 Tooltip </a>.<a href="#" data-toggle="tooltip" data-placement="top" title="頂部的 Tooltip">頂部的 Tooltip </a>.<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip </a>.<a href="#" data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip </a><br/> <h4>提示工具（Tooltip）插件 - 按鈕</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" title="默認的 Tooltip">默認的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左側的 Tooltip">左側的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="頂部的 Tooltip">頂部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip </button> <script>$(function () { $("[data-toggle='tooltip']").tooltip(); }); </script> </body> </html> View Code
效果:
?
2.提示工具的方法?
| 方法 | 描述 | 實例 |
| Options:?.tooltip(options) | 向元素集合附加提示工具句柄。 | $().tooltip(options) |
| Toggle:?.tooltip('toggle') | 切換顯示/隱藏元素的提示工具。 | $('#element').tooltip('toggle') |
| Show:?.tooltip('show') | 顯示元素的提示工具。 | $('#element').tooltip('show') |
| Hide:?.tooltip('hide') | 隱藏元素的提示工具。 | $('#element').tooltip('hide') |
| Destroy:?.tooltip('destroy') | 隱藏并銷毀元素的提示工具。 | $('#element').tooltip('destroy') |
?
?
?
?
?
?
?
?
?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body > <div style="padding: 100px 100px 10px;"><a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show</a><br /><br /><a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide</a><br /><br /><a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy</a><br /><br /><a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle</a><br /><br /><p class="tooltip-options" ><a href="#" data-toggle="tooltip" title="'am Header2">Tooltip 方法 options</a></p><script>$(function () { $('.tooltip-show').tooltip('show'); });$(function () { $('.tooltip-hide').tooltip('hide'); });$(function () { $('.tooltip-destroy').tooltip('destroy'); });$(function () { $('.tooltip-toggle').tooltip('toggle'); });$(function () {$(".tooltip-options a").tooltip({ html: true });});</script> </div> </body> </html> View Code效果:
?
?
?
轉載于:https://www.cnblogs.com/wei325/p/4943067.html
總結
以上是生活随笔為你收集整理的BootStrap学习(6)_模态框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在VS2013中打开Nuget
- 下一篇： 详细解读Jquery各Ajax函数：$.