bootstrap modal 垂直居中对齐

文章参考

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

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

Html代码  

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.   
19.   
20. function showTips(){  
21.     $(‘#sqh_model‘).modal(‘show‘)  
22. }  

默认是距离顶部30px,左右居中

如图所示

解决办法一：覆盖之前的CSS样式

Html代码  

1. /**********对bootstrap的modal样式进行重写**********/  
2. .modal-dialog {  
3.     margin: 200px auto;  
4. }  

解决办法二：调用回调函数

Js代码  

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.     }  

解决办法三：修改源代码

Js代码  

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

参数

可以将选项通过 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...
})