使用jQuery和类似样式的模态插入iFrame

Question

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

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

我创建了一个小提琴以显示正在发生的事情： 小提琴

这是我的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。

在这里看到小提琴

  $(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>