bootstrap modal 垂直居中对齐

文章参考

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

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

 

<div class="modal fade" id="sqh_model"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">蔬菜预约</h4> </div> <div class="modal-body"> <p>尽请期待</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> function showTips(){ $('#sqh_model').modal('show') }

 

 

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

如图所示

 

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

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

 

 

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

 

//触发显示对话框 function showTips(){ $('#sqh_model').modal('show'); } //配置model对话框 $(function(){ //{"backdrop":"static"}点击背景不会消失 $('#sqh_model').modal({"backdrop":"static"}).on("shown.bs.modal",function(){ // 是弹出框居中。。。 var $modal_dialog = $(this.$element[0]).find('.modal-dialog'); //获取可视窗口的高度 var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; //得到dialog的高度 var dialogHeight = $modal_dialog.height(); //计算出距离顶部的高度 var m_top = (clientHeight - dialogHeight)/2; console.log("clientHeight : " + clientHeight); console.log("dialogHeight : " + dialogHeight); console.log("m_top : " + m_top); $modal_dialog.css({'margin': m_top + 'px auto'}); }); });

 

 

 

解决办法三：修改源代码

Modal.prototype.adjustDialog = function () { var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight this.$element.css({ paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' }); // 是弹出框居中。。。 var $modal_dialog = $(this.$element[0]).find('.modal-dialog'); //获取可视窗口的高度 var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; //得到dialog的高度 var dialogHeight = $modal_dialog.height(); //计算出距离顶部的高度 var m_top = (clientHeight - dialogHeight)/2; console.log("clientHeight : " + clientHeight); console.log("dialogHeight : " + dialogHeight); console.log("m_top : " + m_top); $modal_dialog.css({'margin': m_top + 'px auto'}); }

 

 

参数

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

名称 类型 默认值 描述 backdropboolean 或 字符串'static' true

Includes a modal-backdrop element. Alternatively,

specify static for a backdrop which doesn't close

the modal on click.

keyboardbooleantrue键盘上的 esc 键被按下时关闭模态框。showbooleantrue模态框初始化之后就立即显示出来。remotepathfalse

This option is deprecated since v3.3.0 and will be

removed in v4. We recommend instead using

client-side templating or a data binding framework,

or calling jQuery.loadyourself.

如果提供的是 URL，将利用 jQuery 的 load 方法从此

URL 地址加载要展示的内容（只加载一次）并

插入 .modal-content 内。如果使用的是 data 属性 API，

还可以利用 href 属性指定内容来源地址。下面是一个实例：

复制 <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">).

事件类型 描述 show.bs.modal

show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器

的元素，则此元素可以通过事件的relatedTarget 属性进行访问。

shown.bs.modal

此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。

如果是通过点击某个作为触发器的元素，则此元素可以通

过事件的 relatedTarget 属性进行访问。

hide.bs.modal hide 方法调用之后立即触发该事件。hidden.bs.modal此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。loaded.bs.modal从远端的数据源加载完数据之后触发该事件。 复制 $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) 大小: 10.6 KB 查看图片附件