bootstrap 页面垂直居中_iframe中如何让layer提示框显示在垂直居中的位置
发布日期:2021-06-24 10:02:11
浏览次数:4
分类:技术文章
本文共 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%']});
修改后不出意外的话应该是这样的:
传送门:
Layui layer弹层组件文档
如果无法实现你们预期的效果,可以在文章下面留言哈,有看到就会回复。
转载地址:https://blog.csdn.net/weixin_31990755/article/details/112206426 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年04月02日 20时39分15秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
鸡兔同笼(1)
2019-04-28
两数交换输出顺序
2019-04-28
两浮点数相除
2019-04-28
商和余数
2019-04-28
植树问题
2019-04-28
美元和人民币
2019-04-28
Cannot read property 'echarts' of undefined
2019-04-28
window.onload不能正常执行
2019-04-28
js文件中引入另一个js文件
2019-04-28
ajax-hook+ selenium抓取带参数的 Ajax 数据
2019-04-28
Idea+maven-jar-plugin构建JavaFX可执行jar包
2019-04-28
JavaFX教程和资源整理-Scene Builder下载地址
2019-04-28
VSCode常用snippet
2019-04-28
PHP传递给js的JSON数据无法反序列化
2019-04-28
Java:String和List互相转换
2019-04-28
Java:HttpURLConnection发送GET和POST请求
2019-04-28
js事件流:捕获阶段和冒泡阶段
2019-04-28
Mac环境IDEA编写XML行注释不显示在行首
2019-04-28
Java获取字符串Md5值
2019-04-28