CSS and jQuery Tutorial: Overlay with Slide Out Box

The other day I was creating an overlay with a box for Cody’s jTextTranslate jQuery Plugin and I thought, it could be useful to describe the technique in a tutorial.

So, I want to show you how to create a semi-transparent overlay that covers all the page, and a message box that can be turned off again. You can see on the screenshot how that will look.

Then I will show you how to add some jQuery that will make the overlay appear and the message box slide down from the top of the page (try the demo at the end of this post).

Ok, let’s get to work:

1. The HTML

We just need two elements in our HTML: a div for the overlay and a div for the box. The box will contain a link element for a closing icon and some text. And here we go:

<div class="overlay" id="overlay" style="display:none;"></div>

<div class="box" id="box">
 <a class="boxclose" id="boxclose"></a>
 <h1>Important message</h1>
 <p>
  Here comes a very important message for your user.
  Turn this window off by clicking the cross.
 </p>
</div>

Since we will be referring to these two main elements in the JavaScript later, we should already give them IDs. You can place the overlay and the box div anywhere in your site as a direct child of the body.

The overlay is getting a style tag with display:none since we want it not to be visible initially. The visibility of the box will be handled in the CSS.

Let’s give them some style.

2. The CSS

For the overlay we will simply use a transparent image that will be repeated. We could as well just give it a dark background color and make it transparent with CSS properties, but for now, we will use an image:

.overlay{
    background:transparent url(images/overlay.png) repeat top left;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}

What we are doing here is to stretch this div by saying that from all sides it’s position is 0. So, no matter how wide the browser window is, this will always make it being stretched over all the page. Using position:fixed will always keep it at 0 no matter where you are in the page, e.g. after scrolling. If we would have used position:absolute we would just have the visible (top part of the page) covered, not including the part after we scroll down. The z-index needs to be very high in order to put this element on top of all the others (except the box).

The box will have the following CSS properties:

.box{
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}

Again, we have a fixed container here because we want the box to move along as we scroll. For the top property we provide a negative value since we want the box to be ouside of our window i.e. not visible in the beginning. We don’t just say “display:none” since we want the box to appear sliding out from the top, hence we need to work with positioning here.

In order to center the element on the page we simply give it the same distance from the right as from the left. Using percentages allows to adapt elements nicely to all screen sizes – keep in mind that they can vary extremely.

The CSS3 properties add some rounded borders and some shadow to the box. They will not work in IE though.

The z-index needs to be bigger than the one of the overlay. Here, we just add one. Make sure, that you don’t have any absolute positioned elements with a higher z-index.

The closing cross of the box will have the following styling:

a.boxclose{
    float:right;
    width:26px;
    height:26px;
    background:transparent url(images/cancel.png) repeat top left;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
}

This little element should be halfway “outside” of the box and since the box has a padding of 20 pixels, we “pull” the element up and to the right by giving it a negative margin of -30 pixels for these sides. Negative margins can be used in a lot of ways to help you position elements, don’t be afraid to use them, it’s a good practice trick 🙂 A very useful article about negative margins by Dan Cederholm can be found here.

The h1 element will get some styling, too:

.box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
    -moz-border-radius:20px 20px 0px 0px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}

Again, we apply negative margins here to pull the the element into place. Notice, that the CSS3 properties of Mozilla can be written in shorthand.

Okay, that’s the CSS, now let’s move to the juicy JavaScript.

3. The JavaScript

The following code is added at the end of the HTML right before the closing body tag:

$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'160px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });

});

The #activator element stands for any element in your page that should trigger the overlay and the box to appear. In the demo I simply added a styled link element with that ID.

When that activator element gets clicked, the overlay should fade in really fast (uh, jQuery is just like a natural language…) and just after that’s done, another function should be executed that makes the box slide out from the top. That’s what the animate() does. Then saying that top should be 160 pixels means that we want the box to move from it’s current position to position top:160px, and that should take 500 milliseconds.

After the overlay and the box have appeared, we want to be able to turn the box off again by clicking on the cross icon. The function for that first makes the box slide up again to it’s old position (top:-200px) and makes the overlay disappear afterward.

Be aware that the initial position of the box of -200px depends on the height of the box. If your box is bigger in height, make sure that the initial top value is lower (i.e. -500px if your box is 500px high).

And that’s it! Try to experiment with the speeds for the elements to appear. You can replace the ‘fast’ for any millisecond value as well. And you can also make the box slide out from the right or the left, for that, you just have to adapt the initial values and the values in the JavaScript functions.

Enjoy!