0

我对 Web 开发相当陌生，并且我所做的一切都是自学的。我有一个 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

4

1 回答 1

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 中。

于 2013-03-27T16:24:30.877 回答