boostrap 模态居中点空白处不关闭

最新推荐文章于 2020-05-19 23:53:20 发布

原创最新推荐文章于 2020-05-19 23:53:20 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用jQuery插件使模态框在页面上居中显示的方法，通过克隆模态框并计算其高度来调整内容的位置，实现更优的视觉效果。

 $('#myModal').modal({
               backdrop: 'static',
               keyboard: false,//禁止键盘
               show: false
           });

           $('#myModal').on('show.bs.modal', function () {

               $('#myModal').each(function (i) {
                   var $clone = $(this).clone().css('display', 'block').appendTo('body');
                   var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                   top = top > 0 ? top : 0;
                   $clone.remove();
                   $(this).find('.modal-content').css("margin-top", top);
               });   

           });