1. 程式人生 > >bootstrap彈出層Modal 模態框

bootstrap彈出層Modal 模態框

關閉 type ajax 刪除 mar 形式 調用示例 smis get

bootstrap中的模態框(modal),不同於Tooltips,模態框以彈出對話框的形式出現,具有最小和最實用的功能集。

務必將模態框的 HTML 代碼放在文檔的最高層級內(也就是說,盡量作為 body 標簽的直接子元素),以避免其他組件影響模態框的展現或功能。

技術分享圖片

默認的modal示例:

[html] view plain copy 技術分享圖片技術分享圖片
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Bootstrap Modal</title>
  8. <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  12. Launch demo modal
  13. </button>
  14. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  15. <div class="modal-dialog" role="document">
  16. <div class="modal-content">
  17. <div class="modal-header">
  18. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  19. <span aria-hidden="true"</span>
  20. </button>
  21. <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  22. </div>
  23. <div class="modal-body">
  24. <p>One fine body…</p>
  25. </div>
  26. <div class="modal-footer">
  27. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  28. <button type="button" class="btn btn-primary">Save</button>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  34. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  35. </body>
  36. </html>
  1. 為 .modal 添加 role="dialog",用於指定模態框為對話框。
  2. 為 .modal-dialog 添加 aria-hidden="true" 屬性。
  3. 通過 aria-describedby 屬性為模態框 .modal 添加描述性信息。

關閉動畫

如果你不需要模態框彈出時的動畫效果(淡入淡出效果),刪掉 .fade 類即可。


通過按鈕屬性顯示不同內容
當有一堆按鈕,都要觸發相同的模態框(如:向好友列表中某個人發消息),只是有用戶ID不同,那麽可以使用data-whatever配合event.relatedtarget來實現:

[html] view plain copy 技術分享圖片技術分享圖片
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Bootstrap Modal</title>
  8. <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11. <div class="panel panel-default">
  12. <div class="panel-heading">好友列表</div>
  13. <div class="panel-body">
  14. <div class="list-group" role="group" aria-label="好友列表">
  15. <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  16. data-whatever="張三">張三
  17. </button>
  18. <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  19. data-whatever="李四">李四
  20. </button>
  21. <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  22. data-whatever="王二">王二
  23. </button>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  28. <div class="modal-dialog" role="document">
  29. <div class="modal-content">
  30. <div class="modal-header">
  31. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  32. aria-hidden="true"</span></button>
  33. <h4 class="modal-title" id="exampleModalLabel">New message</h4>
  34. </div>
  35. <div class="modal-body">
  36. <form>
  37. <div class="form-group">
  38. <label for="recipient-name" class="control-label">Recipient:</label>
  39. <input type="text" class="form-control" id="recipient-name">
  40. </div>
  41. <div class="form-group">
  42. <label for="message-text" class="control-label">Message:</label>
  43. <textarea class="form-control" id="message-text"></textarea>
  44. </div>
  45. </form>
  46. </div>
  47. <div class="modal-footer">
  48. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  49. <button type="button" class="btn btn-primary">Send message</button>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  55. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  56. <script>
  57. $(‘#exampleModal‘).on(‘show.bs.modal‘, function (event) {
  58. var button = $(event.relatedTarget) // 觸發事件的按鈕
  59. var recipient = button.data(‘whatever‘) // 解析出data-whatever內容
  60. var modal = $(this)
  61. modal.find(‘.modal-title‘).text(‘Message To ‘ + recipient)
  62. modal.find(‘.modal-body input‘).val(recipient)
  63. })
  64. </script>
  65. </body>
  66. </html>

通常不需寫 JavaScript 代碼也可激活模態框。通過在一個起控制器作用的元素(例如:按鈕)上添加 data-toggle="modal" 屬性,或者 data-target="#foo" 屬性,再或者 href="#foo" 屬性,用於指向被控制的模態框。

通過JavaScript調用modal

通常只需一行 JavaScript 代碼,即可通過元素的 id myModal 調用模態框:

[html] view plain copy 技術分享圖片技術分享圖片
  1. $(‘#myModal‘).modal(options)

JavaScript參數

可以將選項通過 data 屬性或 JavaScript 代碼傳遞。對於 data 屬性,需要將參數名稱放到 data- 之後,例如 data-backdrop=""。

名稱類型默認值描述
backdrop boolean或‘static‘ true 默認情況下,點擊其它位置,模態框自動關閉,你可以設置此屬性為false或者"static"防止模態框自動關閉
keyboard boolean true 鍵盤上的 esc 鍵被按下時關閉模態框。
show path true 模態框初始化之後就立即顯示出來。
remote path false 這個參數在v4裏會去掉(可以自己寫ajax請求來實現)如果提供的是 URL,將利用 jQuery 的 load 方法從此 URL 地址加載要展示的內容(只加載一次)並插入 .modal-content 內。如果使用的是 data 屬性 API,還可以利用 href 屬性指定內容來源地址。下面是一個實例:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

調用示例
1.將頁面中的某塊內容作為模態框激活。接受可選參數 object。

[html] view plain copy 技術分享圖片技術分享圖片
  1. $(‘#myModal‘).modal({
  2. keyboard: false
  3. })


2.手動打開或關閉模態框。在模態框顯示或隱藏之前返回到主調函數中(也就是,在觸發 shown.bs.modal 或 hidden.bs.modal 事件之前)。

[html] view plain copy 技術分享圖片技術分享圖片
  1. $(‘#myModal‘).modal(‘toggle‘)


3.手動打開模態框。在模態框顯示之前返回到主調函數中 (也就是,在觸發 shown.bs.modal 事件之前)。

[html] view plain copy 技術分享圖片技術分享圖片
  1. $(‘#myModal‘).modal(‘show‘)


4.手動隱藏模態框。在模態框隱藏之前返回到主調函數中 (也就是,在觸發 hidden.bs.modal 事件之前)。

[html] view plain copy 技術分享圖片技術分享圖片
  1. $(‘#myModal‘).modal(‘hide‘)


5.更新模態框,在模態框動態添加或刪除內容時:

[html] view plain copy 技術分享圖片技術分享圖片
  1. $(‘#myModal‘).modal(‘handleUpdate‘)


綁定事件
Bootstrap 的模態框類提供了一些事件用於監聽並執行你自己的代碼。

事件類型描述
show.bs.modal show 方法調用之後立即觸發該事件。如果是通過點擊某個作為觸發器的元素,則此元素可以通過事件的 relatedTarget 屬性進行訪問。
shown.bs.modal 此事件在模態框已經顯示出來(並且同時在 CSS 過渡效果完成)之後被觸發。如果是通過點擊某個作為觸發器的元素,則此元素可以通過事件的 relatedTarget 屬性進行訪問。
hide.bs.modal hide 方法調用之後立即觸發該事件。
hidden.bs.modal 此事件在模態框被隱藏(並且同時在 CSS 過渡效果完成)之後被觸發。
loaded.bs.modal 從遠端的數據源加載完數據之後觸發該事件。

如:

[html] view plain copy 技術分享圖片技術分享圖片
    1. $(‘#myModal‘).on(‘hidden.bs.modal‘, function (e) {
    2. // do something...
    3. })
註:轉自博友

bootstrap彈出層Modal 模態框