bootstrap 中关于模态框位置的自定义设置（在不改变源码的前提下）

最新推荐文章于 2022-03-01 18:28:38 发布

原创最新推荐文章于 2022-03-01 18:28:38 发布 · 6k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何通过调整Bootstrap模态框的样式来自定义其位置。通过设置modal-dialog的margin-top属性，可以精确控制模态框在屏幕上的垂直位置。同样的方法也可以应用于水平位置的调整。

用过bootstrap的童鞋们在使用模态框的时候一定见过这几个class ：modal fade modal-dialog modal-body ，至于这些class都有什么作用，大家去bootstrap官网去查一下就知道了。

直接进入主题，本次对模态框位置自定义的本质其实就是对modal-dialog的style进行自定义，代码如下：

$('#menuhelp_display').on('shown.bs.modal', function () {
            
            //初始化模态框高度为 屏幕高度/2
            var modalHeight=$(window).height() / 2;
            
            //将上面的高度设置到 modal-dialog中的margin-top属性中
            $(this).find('.modal-dialog').css({
                'margin-top': modalHeight
            });
        });

说白了，就是通过设置modal-dialog 的 margin-top 来控制模态框的上下位置，然后举一反三，控制左右位置你就懂了吧！