使用带有模态样式的 jQuery 插入 iFrame答案

【问题标题】：Insert iFrame using jQuery with modal like styling使用带有模态样式的 jQuery 插入 iFrame
【发布时间】：2017-04-04 14:16:34
【问题描述】：

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

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

我创建了一个 Fiddle 来展示发生了什么：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>");
  });
}

谢谢

【问题讨论】：

在小提琴中，是否假设有一个弹出打开的 iframe 模式？
好吧 jQuery 会为你弹出它，但你应该能看到它后面的“Hi”，但你不能
iframe 本身是透明的。您正在加载的页面不是。它有一个白色的背景。如果您检查并将主体的背景颜色更改为透明（例如background-color: rgba(0,0,0,0)），您可以看穿它。
嗯，我做到了，但我仍然看不到 iframe 后面..
哈哈，好吧，我的错......在你的脚本中 - 你正在用 iframe 替换
的内容。再也没有“嗨”了。此外，您在第一个 div 上至少缺少一个结束标记。仔细检查 html 并在 h1 之后添加 iframe 。

标签： javascript jquery html css iframe

【解决方案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>

【讨论】：

的内容。再也没有“嗨”了。此外，您在第一个 div 上至少缺少一个结束标记。仔细检查 html 并在 h1 之后添加 iframe 。