Question

我对网络开发相当陌生，并且在我做的每件事情上都是自学成才。我有一个iframe，我有一个页面，有一个css＆amp;由jquery调用的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中。

iframe导致css弹出问题

1 个答案: