bootstrap 页面垂直居中_iframe中如何让layer提示框显示在垂直居中的位置-白红宇的个人博客

bootstrap 页面垂直居中_iframe中如何让layer提示框显示在垂直居中的位置

发布日期：2021-06-24 10:02:11 浏览次数：3 分类：技术文章

本文共 1323 字，大约阅读时间需要 4 分钟。

修改记录：

20191127 - 新增文章；

20191127 - 增加正文图片；

20191128 - 发现页面重新滚动后弹层位置一样跑偏，定位到问题是页面滚动后滚动高度发生变化，之前定义的 msgOffsetTop和 pageScrollTop需要在弹层显示时获取新的值 - 增加方法getVerticalPosition()，返回msgOffsetTop+pageScrollTop;

背景：

后台管理系统，公用的顶部导航和左侧导航，中间是几个来回切换的iframe，或者一个公用的iframe做跳转，iframe嵌套的子页面很长，比如$(document).height()>1440px，操作按钮（保存、取消、删除之类）在靠近页面底部的位置，在操作后引用了layer做信息提示，这时你设置垂直居中的弹窗位置可能只是在子页面中垂直居中了，所以你可能会只看见黑色半透明的遮罩层，而看不见提示框；

比如这样（只有半透明的遮罩，看不见提示框）：

目的：

让layer提示框显示在垂直居中的位置

可能需要了解的内容：

layer版本1.8.5、2.1；

父页面窗口可见高度：$(window.parent).height()、父页面垂直向上滚动距离：$(window.parent.document).scrollTop()；

//希望子页面内提示框在窗口内显示的位置//var msgOffsetTop = $(window.parent).height()/2-30; // 父页面滚动的距离//var pageScrollTop = $(window.parent.document).scrollTop(); // 调用该方法时会返回新的垂直高度，直接用在offset上function getVerticalPosition() {
        var msgOffsetTop = $(window.parent).height()/2-30;    var pageScrollTop = $(window.parent.document).scrollTop();    return pageScrollTop + msgOffsetTop;}// layer v1.8.5var icon = icon?1:2; // icon$.layer({
        type: 0,    title: false,    closeBtn: false,    time: 2,    offset : [getVerticalPosition()+'px' , '50%'],    dialog: {
            type: icon,        msg: '111'    }});// layer v2.1layer.msg('222', {
        offset:[getVerticalPosition()+'px', '50%']});

修改后不出意外的话应该是这样的：