如何在iframe内部弹出浮层,浮层遮罩整个浏览器

来源:互联网 发布:太阳花女王 知乎 编辑:程序博客网 时间:2024/05/18 20:13

需求说明:

  • 页面内有多级iframe嵌套;
  • iframe内部某些按钮点击后需要弹出浮层;
  • 浮层需要将整个浏览器窗口遮罩,且浮层位于浏览窗口中部。

解决思路:

  • 顶层页面内预留用于显示浮层的div(命名为popdiv),且该div内有一预留的iframe,该iframe用于加载浮层内容,命名为popiframe;
  • 提供可以直接访问浮层内容的url连接;
  • iframe触发显示浮层事件时,通过window.top 设置顶层窗口的popiframe.src;
  • 通过计算浮层内容的长宽及当前窗口的长宽设置popdiv的位置,使其在窗口中央显示。

效果如图:

这里写图片描述

2 0
原创粉丝点击