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

I am struggling with this so if anyone have done this before, I would be happy to get help, because I didn't find any solution. I did this first:

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

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

</body>
</html>

And it's working well, but I need little different solution like this iframe below, only to be displayed as pop up window .

<html>
<head>

</head>

<body>

<iframe src=".php?href=https%3A%2F%2Fwww.facebook%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>

I tried many different options like javascript functions but it seems I didn't find right one. So if any one knows how to display this iframe in pop up window or pop up box on loading of the site, I would appreciate that help.

I am struggling with this so if anyone have done this before, I would be happy to get help, because I didn't find any solution. I did this first:

<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./ 
function enter() {
window.open('https://www.facebook./plugins/post.php?href=https%3A%2F%2Fwww.facebook.%2Fpermalink.php%3Fstory_fbid%3D1345717502122893%26id%3D1345708592123784','','height=240,width=550,left=80%,top=10%');
}
-->
</script>
</head>
<body onload="enter()">

</body>
</html>

And it's working well, but I need little different solution like this iframe below, only to be displayed as pop up window .

<html>
<head>

</head>

<body>

<iframe src="https://www.facebook./plugins/post.php?href=https%3A%2F%2Fwww.facebook.%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>

Share Improve this question asked Jul 5, 2016 at 8:55 Vlada 231 gold badge1 silver badge4 bronze badges

a lot of browsers block pop-ups now. and also a lot of users find it very annoying when they do pop up – ADyson Commented Jul 5, 2016 at 9:01
Never used iframe based popups, but can show you div based if you want – Vinay Commented Jul 5, 2016 at 9:26
Well Pixel i can try that way, it seems even better. Only thing I didn't mention in my question is that website have it's content, and that div based pupup need to jump out and to be gone when clicked on the side. Just to be more specific if some one didn't understand. – Vlada Commented Jul 5, 2016 at 9:34
@Vlada how'd you go? :-) – GROVER. Commented Jul 5, 2016 at 10:13
2 Yes, I did, now I'm master of my pop up window. :) Thanks everyone and thank you @AndrewBone . – Vlada Commented Jul 5, 2016 at 11:56

| Show 8 more ments

3 Answers 3

Sorted by: Reset to default 4

What you want (I think) is something called a lightbox. For a long time you've needed a lot of javascript or some Jquery to do this, but CSS is the way of the future.

Here's how I would do what I think you're asking

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./">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./plugins/post.php?href=https%3A%2F%2Fwww.facebook.%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>

I haven't really styled it much, you can use CSS to make it look however you want.

I hope this is what you were looking for.

Have your popup already showing on your website when users arrive.

Put this little script just above your popup <div>. Once users arrive, and the site fully loads, the popup will disappear.

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

Ensure that you have loaded the jQuery API in the <head> of your page for it to work!

You can of course adjust the CSS and change the div accordingly to how you would like it :)

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./">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./plugins/post.php?href=https%3A%2F%2Fwww.facebook.%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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744159107a4561006.html

javascript - How can I create pop up window that loads when you enter the site? - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How can I create pop up window that loads when you enter the site? - Stack Overflow

3 Answers 3

相关推荐