bootstrap模态框弹出居中显示

在项目中，有几个使用bootstrap模态框弹出问题，在单页面上是居中显示，但是嵌套在别的iframe中，弹出的位置在靠近顶部的位置。
查阅了一些资料，有几种解决方案，1修改bootstrap的js文件，使弹出的位置居中 2在每个页面弹出时，修改弹出的位置 3把bootstrap模态框弹出iframe的最外层
在实际操作中，使用第一种方式，会影响到其他使用到bootstrap的相关的未知影响，第三种方式，我虽然把数据弹到最外层，但是双向绑定的数据不能传递，有些使用的插件效果也失效。所以我采用的是第二种方式。

可以通过监听事件来控制单个模态框弹出位置

我们可以选择show.bs.modal来控制模态框弹出位置，垂直居中可以使用以下是实现代码：

$('#myModalDialog').on('show.bs.modal', function(){var $this = $(this);var $modal_dialog = $this.find('.modal-dialog');$this.css('display', 'block');$modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });});$("#myModalDialog").modal({backdrop: false, keyboard: false});

但有时我们页面比较长，想要就在浏览的位置弹出，可以利用点小技巧

$('#myModalDialog').on('show.bs.modal', function () {var $this = $(this);var $modal_dialog = $this.find('.modal-dialog');$this.css('display', 'block');// 点击事件传入event参数，通过enent.clientY可以取到当前点击处到页面顶端的高度var marginTop = event.clientY;// 但显示的地方就正好是点击处，还是不太满意，可以使用滚动条的高度来实现if (parent.$('.scrollbar').length > 0) {marginTop = parent.$('.scrollbar').scrollTop();}$modal_dialog.css({'margin-top': marginTop});
});
$("#myModalDialog").modal({backdrop: true, keyboard: false});

bootstrap模态框弹出居中显示相关推荐

bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不 ...
bootstrap 模态框弹出就消失了_Bootstrap 弹出框
Bootstrap 弹出框(Popover)插件弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 ...
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
vue中实现模态框弹出框动画（旋转弹出）
vue模态框弹窗动画沃达尔 (Vodal) A Nice vue modal with animations. 带有动画的尼斯vue模态. 安装 npm i -S vodal 用法 <temp ...
微信小程序简易实现模态框弹出框方法代码
方法如下介绍 wxml代码 Javacript代码 wxss样式介绍可以将showModal和hideModal内的方法交换从而改变弹出框方向,但要注意showModalStatus在两个函数内 ...
Bootstrap模态框垂直高度居中问题
Bootstrap对话框改变其默认宽高,高度不会自适应居中.为解决这个问题,最好的方式是能够通过css来解决,试了几种网上的方案发现都不行.然后想到可以通过js来修正,什么时候修正最好?于是想到可以注 ...
Bootstrap模态框居中显示
Bootstrap默认的模态框不是居中显示的,需要稍微修改下源代码: 1.打开源码bootstrap.js,在里面找到如下代码: 2.在上述代码段落下面增加居中的代码即可: //使弹出框居中...va ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
bootstrap 模态框的初始化、打开、关闭事件
1.模态框的初始化 //初始化模态框$("#model").modal({//点击背景不关闭backdrop:"static",//触发键盘esc事件时不关闭k ...

bootstrap模态框弹出居中显示

bootstrap模态框弹出居中显示相关推荐

最新文章

热门文章