文章參考

http://www.bubuko.com/infodetail-666582.html

http://v3.bootcss.com/javascript/#modals

1. <div class="modal fade" id="sqh_model">  
2.     <div class="modal-dialog">  
3.         <div class="modal-content">  
4.             <div class="modal-header">  
5.                 <
   button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
6.                 <h4 class="modal-title">蔬菜預約</h4>  
7.             </div>  
8.             <div class="modal-body">  
9.                 <
   p>盡請期待</p>  
10.             </div>  
11.             <div class="modal-footer">  
12.                 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>  
13.                 <button type="button" class="btn btn-primary" data-dismiss="modal">確定</button
    >  
14.             </div>  
15.         </div><!-- /.modal-content -->  
16.     </div><!-- /.modal-dialog -->  
17. </div><!-- /.modal -->  
18. function showTips(){  
19.     $('#sqh_model').modal('show')  
20. }  

預設是距離頂部30px,左右居中

如圖所示

解決辦法一：覆蓋之前的CSS樣式

1. /**********對bootstrap的modal樣式進行重寫**********/  
2. .modal-dialog {  
3.     margin: 200px auto;  
4. }  

解決辦法二：呼叫回撥函式

1. function showTips(){  
2.         //{"backdrop":"static"}點選背景不會消失  
3.         $('#sqh_model').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){  
4.             // 是彈出框居中。。。  
5.             var $modal_dialog = $(this.$element[0]).find('.modal-dialog');  
6.             //獲取可視視窗的高度  
7.             var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  
8.             //得到dialog的高度  
9.             var dialogHeight = $modal_dialog.height();  
10.             //計算出距離頂部的高度  
11.             var m_top = (clientHeight - dialogHeight)/2;  
12.             console.log("clientHeight : " + clientHeight);  
13.             console.log("dialogHeight : " + dialogHeight);  
14.             console.log("m_top : " + m_top);  
15.             $modal_dialog.css({'margin': m_top + 'px auto'});  
16.         });  
17.     }  

解決辦法三：修改原始碼

1. Modal.prototype.adjustDialog = function () {  
2.     var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight  
3.     this.$element.css({  
4.       paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',  
5.       paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''  
6.     });  
7.     // 是彈出框居中。。。  
8.     var $modal_dialog = $(this.$element[0]).find('.modal-dialog');  
9.     //獲取可視視窗的高度  
10.     var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  
11.     //得到dialog的高度  
12.     var dialogHeight = $modal_dialog.height();  
13.     //計算出距離頂部的高度  
14.     var m_top = (clientHeight - dialogHeight)/2;  
15.     console.log("clientHeight : " + clientHeight);  
16.     console.log("dialogHeight : " + dialogHeight);  
17.     console.log("m_top : " + m_top);  
18.     $modal_dialog.css({'margin': m_top + 'px auto'});  
19. }  

引數

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

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

方法

.modal(options)

將頁面中的某塊內容作為模態框啟用。接受可選引數 object。

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

手動開啟或關閉模態框。在模態框顯示或隱藏之前返回到主調函式中（也就是，在觸發 shown.bs.modal 或hidden.bs.modal 事件之前）。

$('#myModal').modal('toggle')

.modal('show')

手動開啟模態框。在模態框顯示之前返回到主調函式中 （也就是，在觸發 shown.bs.modal 事件之前）。

$('#myModal').modal('show')

.modal('hide')

手動隱藏模態框。在模態框隱藏之前返回到主調函式中 （也就是，在觸發 hidden.bs.modal 事件之前）。

$('#myModal').modal('hide')

.modal('handleUpdate')

Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.

Only needed when the height of the modal changes while it is open.

$('#myModal').modal('handleUpdate')

事件

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

All modal events are fired at the modal itself (i.e. at the <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})