bootstrap彈出框，根據點擊將本文的內容添加到彈出框中
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bootstrap Modal</title>
- <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
- </head>
- <body>
- <div class="panel panel-default">
- <div class="panel-heading">好友列表</div>
- <div class="panel-body">
- <div class="list-group" role="group" aria-label="好友列表">
- <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
- data-whatever="張三">張三
- </button>
- <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
- data-whatever="李四">李四
- </button>
- <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
- data-whatever="王二">王二
- </button>
- </div>
- </div>
- </div>
- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h4 class="modal-title" id="exampleModalLabel">New message</h4>
- </div>
- <div class="modal-body">
- <form>
- <div class="form-group">
- <label for="recipient-name" class="control-label">Recipient:</label>
- <input type="text" class="form-control" id="recipient-name">
- </div>
- <div class="form-group">
- <label for="message-text" class="control-label">Message:</label>
- <textarea class="form-control" id="message-text"></textarea>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Send message</button>
- </div>
- </div>
- </div>
- </div>
- <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
- <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
- <script>
- //綁定模態框展示的方法
- $('#exampleModal').on('show.bs.modal', function (event) {
- var button = $(event.relatedTarget) // 觸發事件的按鈕
- var recipient = button.data('whatever') // 解析出whatever內容
- var modal = $(this) //獲得模態框本身
- modal.find('.modal-title').text('Message To ' + recipient) // 更改將title的text
- modal.find('.modal-body input').val(recipient)
- })
- </script>
- </body>
- </html>
- 效果展示：
-
- 使用模態框需要某種觸發器（鏈接或者按鈕）。
-
-
在模態框中需要注意兩點：
- 第一是 .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 用於打開模態窗口。
-
在模態框中需要注意兩點：
-
$('#identifier').modal({ keyboard: false })
Toggle: .modal('toggle')手動切換模態框。$('#identifier').modal('toggle')
Show: .modal('show')手動打開模態框。$('#identifier').modal('show')
Hide: .modal('hide')手動隱藏模態框。$('#identifier').modal('hide')
事件事件描述實例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 () { // 執行一些動作... })
