bootstrap modal 垂直居中对齐

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(){
        //{"backdrop":"static"}点击背景不会消失
        $('#sqh_model').modal({"backdrop":"static"}).modal('show').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=""。

名称 类型 默认值 描述

backdrop	boolean 或 字符串'static'	true	Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框。
show	boolean	true	模态框初始化以后就当即显示出来。
remote	path	false	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... })