Show Advertisement Modal Pop Up On Page Load

Introduction

Sometimes you may need to show a modal pop up when your web page loads for the first time ( for advertisement or may be for other purposes ). Here I am giving you an example how to achieve this using Javascript and css.

Download Source Code Here

 

Behind The Scene

Here I am taking a simple html web page which contains some information and controls, at the top of the web page add the following line of code. I mean add those 2 divs at the top of the body and after these div add your code blocks and controls.

 <div class="overlay"></div>
 <div class="modal">
     <h1 style="text-align:center;">Just 3 more days to go...</h1>
      <h1 style="text-align:center;">Call us for advance booking.</h1>
      <button class="single close">close</button>
 </div>

Now add the following line of styles to the page .

 <style type="text/css">
    .overlay {
        position:fixed;
        top:0;
        left:0;
        display:block;
        width:100%;
        height:100%;
        opacity:0.75;
        background-color:#C52E02;
        z-index:9000;
    }
    .modal {
        background-color: #CCCCCC;
        border-radius: 5px 5px 5px 5px;
        display: block;
        height: 233px;
        left: 34%;
        padding: 10px;
        position: fixed;
        top: 30%;
        width: 450px;
        z-index: 999999;
    }
    .modal button {
        display:inline-block;
        width:30%;
        margin-left:1.5%;
    }
    .modal button.single {
       display: block;
        margin-left: 202px;
        margin-top: 25px;
        width: 50px;
    }
 </style> 

Fine, now add the below given script to the head section of the web page. And also add the latest .js file to the page.

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
        $(document).ready(function () {
            $('.close').click(function () {
                $('.overlay, .modal').fadeOut('slow');
            });


        });
 </script>   

Now just run the page and see what happens when the page loads completely. You have added a modal pop up, where you can show your advertisement or any information you want to show your users when they come to your website for the first time.



Happy Coding...