Javascript 使用带有类似模态样式的jQuery插入iFrame

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

现在一切都很好，除了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>");
  });
}

if（document.location.pathname==='/account'）{
$（函数（）{
$（“body”）.html（“在脚本中，您将用iframe替换正文的内容。您应该将其附加到正文中，或者可以添加另一个div以放入iframe



$（函数（）{
$（“#iframediv”）.html（“在小提琴中，是否假设有一个弹出的iframe模式？jQuery会为您弹出它，但您应该能够看到“Hi”在它后面，但您不能看到iframe本身是透明的。您正在加载的页面不是。它有白色背景。如果您检查并将正文的背景色更改为透明（例如
背景色：rgba（0,0,0,0）
）你可以看穿它。嗯，我看穿了，但我仍然看不到iframe后面的内容。哈哈，好吧，我的坏…在你的脚本中-你正在用iframe替换的内容。不再有“hi”。此外，你在第一个div上至少缺少一个结束标记。请仔细检查该html并在h1之后附加iframe。