bootstrap modal 垂直居中对齐

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

默认是距离顶部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. 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...
})