bootstrap模态框居中

原创于 2016-10-26 13:53:36 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #模态框居中

Boostrap 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了两种使Bootstrap模态框居中的方法：通过重写CSS实现视觉居中及通过修改JS逻辑达到交互与视觉双重居中效果。推荐使用后者以保持模态框的良好交互体验。

方案一重写CSS

打开引入的boostrap.css（或boostrap.min.css）文件，找到.modal、.modal-dialog样式，在样式内追加如下代码

/*模态框居中*/
        .modal {
            display: table;
            height: 100%;
            margin: 0 auto;
        }

        .modal-dialog {
            display: table-cell;
            vertical-align: middle;
        }*/

方案二重写JS

打开引入的boostrap.js（或boostrap.min.js）文件，找到Modal.prototype.adjustDialog函数，在函数内追加如下代码

 //模态框居中
        var element = this.$element;
        var dialog = this.$dialog;
        dialog.css({
            'top': function () {
                return (element.height() - dialog.outerHeight(true)) / 2;
            }
        });

结论

重写CSS后，打开模态框后，点击灰色遮罩层后无法隐藏模态框，推荐使用重写JS方案。

打开引入的boostrap.js（或boostrap.min.js）文件，找到Modal.prototype.adjustDialog函数，在函数内追加如下代码