Creating overlay boxes using HTML, CSS and JQUERY

What are overlay boxes?
I think you may have come across this situation, when you open some website and click on login button one pop up box open with login or sign up form in it and there will be some semi transparent box surrounding that white colour box . Those pop up's are called overlay's.

What is the general use of these overlay's?
Suppose, if you don't want to show every information in the page by default when it loaded. and if you want to show certain kind of information after clicking particular link or a button and you want to show in the same page then you can use overlay's. If you want to run some kinds of special ads then also you can use overlay boxes.

Let's start creating an overlay box. here in this post I will show simple confirmation message pop up overlay, you can build up this according to your usage.

html

<div id="overlay"></div>

<div id="message_container">

        <div id="message_container_in></div>

</div>

<button id="btn">Click me</button>

css

#overlay{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 700px;
     background: #000000;
     opacity: 0.7;
    z-index: 99;
    display: none;
}

#message_container {
     position: absolute;
     top: 200px
      width:100%;
     z-index: 999;
     display:none;
}

#message_container_in {
    width:400px;
   padding:10px;
    border-radius: 5px;
    margin:0px auto;
    font-size:20px;
   background: #ffffff;
   z-index: 1000;
}

JQuery

$('#btn').click(function(){

$('#overlay').show();
$('#message_container').slideDown(300);
        $('#message_container').text("You have clicked me");

});


This is it guys. I hope you understood the code written above. If you find any complexities please comment below so that I can explain everything.