如何创建在您进入网站时加载的弹出窗口？答案

【问题标题】：How can I create pop up window that loads when you enter the site?如何创建在您进入网站时加载的弹出窗口？
【发布时间】：2016-07-05 08:55:28
【问题描述】：

我正在为此苦苦挣扎，所以如果以前有人这样做过，我很乐意得到帮助，因为我没有找到任何解决方案。我先这样做了：

<html>
<head>
<title>Website</title>
<script type="text/javascript" language="javascript">

<!-- // Copyright 2016 Leave this copyright notice intact.
// The PCman Website Popup Window Creator 
// http://www.thepcmanwebsite.com/ 
function enter() {
window.open('https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1345717502122893%26id%3D1345708592123784','','height=240,width=550,left=80%,top=10%');
}
-->
</script>
</head>
<body onload="enter()">

</body>
</html>

它运行良好，但我需要一些不同的解决方案，比如下面这个 iframe，只显示为弹出窗口。

<html>
<head>

</head>

<body>

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

</body>
</html>

我尝试了许多不同的选项，例如 javascript 函数，但似乎没有找到合适的选项。因此，如果有人知道如何在弹出窗口或加载网站时的弹出框中显示此 iframe，我将不胜感激。

【问题讨论】：

现在很多浏览器都会屏蔽弹出窗口。而且很多用户在弹出时发现它很烦人
从未使用过基于 iframe 的弹出窗口，但可以根据需要显示基于 div 的窗口
好吧 Pixel 我可以试试这样，看起来更好。我在我的问题中唯一没有提到的是该网站有它的内容，并且基于 div 的小狗需要跳出并在点击侧面时消失。如果有人不明白，请说得更具体。
@Vlada 你好吗？ :-)
是的，我做到了，现在我是弹出窗口的主人。 :) 谢谢大家，谢谢@AndrewBone。

标签： javascript iframe popupwindow

【解决方案1】：

你想要的（我认为）是一种叫做灯箱的东西。很长一段时间以来，您需要大量的 javascript 或一些 Jquery 才能做到这一点，但 CSS 是未来的方式。

我会按照你的要求来做这件事

lightBoxClose = function() {
  document.querySelector(".lightbox").classList.add("closed");
}

body {
  margin: 0;
  background-color: #EBB;
}
.lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5)
}
.toolbarLB {
  text-align: right;
  padding: 3px;
}
.closeLB {
  color: red;
  cursor: pointer;
}
.lightbox .iframeContainer {
  vertical-align: middle;
  background: #CCC;
  padding: 2px;
}
.lightbox.closed {
  display: none;
}

<h1>My Webite</h1>
<h2>Wow isn't my website great</h2>
<p><strong>It just makes you want to close the lightbox so I can get it!</strong>
</p>
<p><a href="http://www.google.com/">A Link to google</a>
</p>
<p><a href="#">A Link to no where</a>, but all the cool kids have multiple links</p>


<!-- the actual interesting bit -->
<div class="lightbox">
  <div class="iframeContainer">
    <div class="toolbarLB">
      <span class="closeLB" onclick="lightBoxClose()">x</span>
    </div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
    allowTransparency="true"></iframe>
  </div>
</div>

我并没有真正设置它的样式，你可以使用 CSS 让它看起来像你想要的那样。

我希望这就是你要找的。p>

【讨论】：

Lightbox 正是我想要的。这正是我需要的代码。太好了，理想情况下的最后一步是一些代码，允许在第一次进入网站时显示灯箱，而不是在每次重新加载时显示。但是你已经帮了我很多了。
@Vlada 然后你需要写一些 cookie，这里是 jsfiddle.net/link2twenty/9t6g4tcx，它会写一个 cookie，只要那个 cookie 在他们的浏览器中，他们就不会再看到这个框了。

【解决方案2】：

当用户到达时，您的弹出窗口已经显示在您的网站上。

把这个小脚本放在你的弹出窗口<div>上方。一旦用户到达并且网站完全加载，弹出窗口就会消失。

<script type="text/javascript">
    $(window).load(function(){ // on window finish load
        $('#popup').css("display", "none"); // turn off the popup
    });
</script>
<div id="popup" style="display: block;">
    <img src="spinner.gif"> // simple loading spinner
</div>

确保您已在页面的<head> 中加载了 jQuery API 以使其正常工作！

您当然可以调整 CSS 并根据需要更改 div :)

【讨论】：

【解决方案3】：

lightBoxClose = function() {
  document.querySelector(".lightbox").classList.add("closed");
}

body {
  margin: 0;
  background-color: #EBB;
}
.lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5)
}
.toolbarLB {
  text-align: right;
  padding: 3px;
}
.closeLB {
  color: red;
  cursor: pointer;
}
.lightbox .iframeContainer {
  vertical-align: middle;
  background: #CCC;
  padding: 2px;
}
.lightbox.closed {
  display: none;
}

<h1>My Webite</h1>
<h2>Wow isn't my website great</h2>
<p><strong>It just makes you want to close the lightbox so I can get it!</strong>
</p>
<p><a href="http://www.google.com/">A Link to google</a>
</p>
<p><a href="#">A Link to no where</a>, but all the cool kids have multiple links</p>


<!-- the actual interesting bit -->
<div class="lightbox">
  <div class="iframeContainer">
    <div class="toolbarLB">
      <span class="closeLB" onclick="lightBoxClose()">x</span>
    </div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
    allowTransparency="true"></iframe>
  </div>
</div>

【讨论】：

您的答案似乎与当前接受的答案相同。介意解释一下你的推理吗？
复制和粘贴答案不会成为更好的选择