bootstrap模态框垂直居中显示

　　在用bootstrap模态框时，特别是小尺寸的模态框时，其显示位置接近屏幕顶端，在网上查找之后，找到了让模态框居中显示的实现。代码如下

function centerModals(){$('.modal').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);});}

$('#question_modal').on('show.bs.modal', centerModals);  //question_modal是html中模态框的id
$(window).on('resize', centerModals);

转载于:https://www.cnblogs.com/eryidianer/p/4935962.html

bootstrap模态框垂直居中显示相关推荐

Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
bootstrap 模态框垂直居中实现方法
2019独角兽企业重金招聘Python工程师标准>>> this.$element.css({paddingLeft: !this.bodyIsOverflowing &&a ...
Bootstrap模态框居中显示
Bootstrap默认的模态框不是居中显示的,需要稍微修改下源代码: 1.打开源码bootstrap.js,在里面找到如下代码: 2.在上述代码段落下面增加居中的代码即可: //使弹出框居中...va ...
bootstrap模态框弹出居中显示
在项目中,有几个使用bootstrap模态框弹出问题,在单页面上是居中显示,但是嵌套在别的iframe中,弹出的位置在靠近顶部的位置. 查阅了一些资料,有几种解决方案,1修改bootstrap的js文 ...
Bootstrap4模态框垂直居中
Bootstrap4模态框垂直居中,只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了.具体如下. Bootstrap4模态框默认不会居中显 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...

bootstrap模态框垂直居中显示

bootstrap模态框垂直居中显示相关推荐

最新文章

热门文章