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

Question

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

<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 这样的小不同解决方案，只能显示为弹出窗口 window。

<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 函数，但似乎没有找到合适的选项。因此，如果有人知道如何在弹出 window 或加载网站时弹出框中显示此 iframe，我将不胜感激。

Answer 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 让它看起来像你想要的那样。

希望这就是您要找的。

Answer 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 :)

Answer 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>

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

How can I create pop up window that loads when you enter the site?

javascript

iframe

popupwindow