javascript - 从 iframe 将 div 弹出窗口居中

Question

在我的页面中有一个 iframe，我需要在 iframe 中使用 javascript 代码显示一个小的 div 弹出窗口。 iframe 和父域的域不同。如何在整个屏幕中居中这个 div 弹出窗口。我发现了另一个类似的问题，但没有答案。

Answer 1

您无法编辑该 iframe，但您可以使 div 具有比该 iframe 更大的 z-index 并在 iframe 内对齐。

步骤:

1. 创建一个 div，带有类 test(在我的步骤中)。
2. 将其左侧位置改为iframe的offsetLeft加上offsetWidth/2(iframe的)，减去iframe的offsetWidth/2 div，你对顶部做同样的事情(将 offsetWidth 每个 offsetHeight 和 offsetLeft 替换为 offsetTop)。<

可能是这样:

div.style.left=(iframe.offsetLeft+(iframe.offsetWidth/2))-div.offsetWidth/2+'px',
div.style.top=(iframe.offsetTop+(iframe.offsetHeight/2))-div.offsetHeight/2+'px'

我建议每次用户滚动页面时更新 div 的 top 和 left CSS 属性，否则 div 将不会与屏幕结合。