javascript - iframe 导致 css 弹出窗口出现问题

Question

我是网络开发的新手，我所做的一切都是自学的。我有一个 iframe，其中有一个页面有一个由 jquery 调用的 css 和 javascript 弹出窗口。应该发生的是，当按下一个链接时，在进入下一页之前，它会显示在一个带有阴影背景的弹出窗口中。这是我的 javascript 代码:

$SearchListings.on("click", "a", function (e) {
     e.preventDefault();
     href = e.target.href;
     itemnum = getItemNum(href);
     var dataString = //urlhere
     $.get(dataString, function (data) {
         $linkShade.fadeIn();
         $linkModal.html(data).delay(500).fadeIn();
         Galleria.loadTheme('js/galleria.classic.min.js');
         $('#galleria').galleria({ lightbox: true });
     });
 });

 $linkShade.on("click", closeModal);
 $linkModal.on("click", ".modalCancel", closeModal);

 $linkModal.on("click", ".modalBtn", function (e) {
     e.target.href = href;
 });`

这是涉及的css

#linkModal {
background: white;
border: 10px solid black;
bottom: 0;
color: black;
display: none;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
height: 700px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 800px;
overflow: scroll;

}

我的问题是如何让弹出窗口显示并居中显示在用户在页面上的位置而不仅仅是在 iframe 中居中的位置。如果这解释得不好，我很抱歉。这是我有史以来的第一篇文章。大多数情况下，我来这里是为了找到我的答案，而且从来不需要发布任何东西。如果可以的话请帮忙。谢谢!

编辑#1: 这是 jsfiddle

Answer 1

遗憾的是，您无法访问 iFrame 中父页面的任何内容，例如屏幕尺寸，以便通过 JavaScript 设置值。子页面中的 css 仅与包含 iFrame 的窗口的解释“屏幕尺寸”相关。

如果您确实有固定布局，您可以将屏幕尺寸作为查询字符串参数传递给您的 iFrame 页面。

var $iframe = $("#myIframe");
$iframe.attr("src", "iFrame.html?parentHeight=" + $(window).height() 
                                    + "&parentWidth=" + $(window).width() 
                                    + "&iFrameHeight=" + $iframe.height()
                                    + "&iFrameWidth=" + $iframe.width();

然后您可以在加载子页面时进行一些计算，以便设置模态对话框的位置，使其居中显示，但它仍必须包含在您的 iFrame 中。