python测试开发django-123.bootstrap模态框(modal)垂直居中显示

前言

bootstrap 模态框默认会在屏幕顶端显示，跟我们的操作习惯不太符合，我们期望显示到屏幕垂直居中的位置。
在最新的 bootstrap4 版本中可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性，来垂直居中显示。
但是大部分用的是bootstrap3 版本，需要自己写javascript脚本来调整位置。

bootstrap3 版本

bootstrap模态框默认会在屏幕顶端显示,位置太靠上了。

bootstrap3 版本，需要自己写 javascript 脚本来调整位置。

• show.bs.modal 在调用 show 方法后触发。
• shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
• hide.bs.modal 当调用 hide 实例方法时触发。
• hidden.bs.modal 当模态框完全对用户隐藏时触发。

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/

<script>
    $('#myModal').on('show.bs.modal', function (e) {
            var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;
            $(this).find('.modal-dialog').css({
                'margin-top': modalHeight
            });
        });
</script>

实现效果

如果想显示在屏幕正中间往上一点的位置，可以通过modalHeight的值控制，比如正中间往上100个像素

var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2 - 100;

设置css让modal 垂直居中

vertical-align:middle 的居中是基于 line-heigh t的，但 line-height:100%; 是相对于字体尺寸的，没法达到模态框居中效果。
在居中的对象后面加一个高度100%的 :after 伪类，两者都 display:inline-block; vertical-align:middle;
也就相当于要居中的对象要和一个高度 100% 的对象中线对齐，:after对象因为没有宽度，所以不占用空间，从达到了垂直居中的目的。

    <style>
    /* 模态框居中样式 */
    .modal{
        text-align: center;
    }
    .modal:after {
        display: inline-block;
        height: 100%;
        margin-left: -0.05em;
        content: "";
        vertical-align: middle;
    }
    .modal-dialog {
        text-align: left;
        display: inline-block;
        vertical-align: middle;
    }
    </style>

bootstrap4 版本

bootstrap4 版本可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性，来垂直居中显示。