Question

我想在HTML页面的顶部显示我的iFrame，就像模态一样。我想要一个透明的背景，这样你就可以看到＆＃34; iFrame / Modal＆＃34;背后的原始页面。

现在一切都很好，除了iFrame的背景，即使我指定它应该是不透明的，它也不透明。

我创建了一个小提琴来展示正在发生的事情：Fiddle

这是我的jQuery

if (document.location.pathname === '/account'){
  $(function() {
  $("body").html("<div id='todd' style='position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 0; box-sizing: border-box;>\n" + 
      "<div style='position: fixed; background-color: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;'></div>\n" +
        "<div style='width: 400px; height: 470px; padding: 0px; background: transparent; margin: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;'>\n" +
          "<iframe onload='this.style.visibility='visible'' allowtransparency='true' style='visibility: visible; width: 100%; height: 100%; border: 0px; background: transparent;' src='https://test-4658.myshopify.com/apps/proxy/credit'></iframe>\n" +
        "</div>\n" +
    "</div>");
  });
}

由于

Answer 1

在您的脚本中，您将使用iframe替换正文的内容。你应该将它附加到正文，或者你可以添加另一个div来放入iframe。

See the fiddle here

 $(function() {
     $("#iframediv").html("<div id='todd' style='position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 0; box-sizing: border-box;>\n" + 
          "<div style='position: fixed; background-color: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;'></div>\n" +
            "<div style='width: 400px; height: 470px; padding: 0px; background: transparent; margin: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;'>\n" +
              "<iframe onload='this.style.visibility='visible'' allowtransparency='true' style='visibility: visible; width: 100%; height: 100%; border: 0px; background: transparent;' src='https://test-4658.myshopify.com/apps/proxy/credit'></iframe>\n" +
            "</div>\n" +
        "</div>");
  });

<h1>
Hi
</h1>
<div id="iframediv">
</div>

使用jQuery插入iFrame与模态样式

1 个答案: