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

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

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.

Solution

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

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.