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，只显示为弹出窗口。

<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或在加载网站时弹出框，我将非常感谢帮助。

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>

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

3 个答案: