Closable jquery full screen popup window and how to make it using CSS

Have you ever wondered how some websites display a closable div or a full screen overlay on top of their main content to say something really important to the viewer? I had to do something similar for my old portfolio that is no longer updated, to direct readers to my new and better looking portfolio instead. Here’s how I did it.

HTML popup window is dead

I just had to say this before I continue. Do not use HTML/Javascript pop up windows- most browsers block these by default and if you mange to bypass the popup blockers, you’re just going to annoy your readers so much they will leave and never come back. Seriously, don’t do it! Instead, use a more modern approach by making a jquery popup box.

Full screen overlay effect in CSS

Consider a simple container div. We need to make its height and width match our viewport/screen. We can do this by applying a 100% viewport width and height:

#box {
height:100vh;
width:100vw;
background:white;
}

Depending on what padding/margin rules you have set for your body element, you might see that the box is not fully covering the screen yet. Besides, we need to position it outside the normal flow anyway, because it needs to stay on top of everything:

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

Now it should cover the whole screen with no margin anywhere. But is it on top of your main content? Probably not. You need to add a high enough z-index to it so it will stay on top:

#box {
z-index:999;
}

But wait… now you just have a box covering the whole screen and your content cannot be accessed. We need to have the box initially hidden so we can make it visible using jquery later on:

#box {
display:none;
}

Right now when you load it up, nothing should show because we have hidden the box. It’s advised to only load the overlay div when the whole page has finished loading so we will put the call inside a document .ready function using jquery:

<script>
$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
    //Box loaded
  });
});
</script>

The box should now load only when the rest of your website has loaded first. So far so good, but there is no way for your user to close the box. To do this, we need another div (it can contain a cool icon if you wish). I’m using a simple X icon with a transparent background found on Google:

<div id="close">
    <img src="http://ynef.net/portfolio/src/close-button.png" alt="Close" height="64" width="64"/>
</div>

The close button would look stupid if it was loaded immediately so we need to hide it the same way we hid the box itself in CSS:

#close {
display:none;
}

While we’re at it, we should position it in a place where it makes sense too. I suggest putting it in the top right corner of your screen with 10px away from both the top and right side (the display:block will make the entire div clickable):

#close {
position:absolute;
top:10px;
right:10px;
display:block;
}

Finally don’t forget to add a higher z-index than what you had for the box. In our case a z-index of 1000 should do the trick:

#close {
z-index:1000;
}

Back to jquery! Since the close button is hidden at first, we need to make it visible after we have loaded the box. Let’s also add a .click function to the close button that will hide everything when clicked:

<script>
$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
        $( "#close" ).show();
        $( "#close" ).click(function() {
        $( "#box" ).hide();
        $( "#close" ).hide();
    });
  });
});
</script>

Now that we have covered everything that’s happening, I can let you copy and paste the whole code as one:

CSS for fullscreen div

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
display:none;
}

#close {
display:none;
position:absolute;
top:10px;
right:10px;
display:block;
z-index:1000;
}

And the jquery

$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
        $( "#close" ).show();
        $( "#close" ).click(function() {
        $( "#box" ).hide();
        $( "#close" ).hide();
    });
  });
});
Share!