How to Create a Image popup on html webpage

Simple jQuery popup on page load

If you need to show some information or advertisement or newsletter sign up or something else when page loads you might want to show this on a popup. In this post I’ll show you how to create one of this type of popup with jQuery. Here is a demo of what we are going to build. To create such popup we need to create an element that spans through out the screen working as a mask and on top of it in the middle of the view port we can show our contents. Let’s first make the masking element. Let’s call it shadow element. This can be created by many ways. This time we shall create a jQeury object and on page load and prepend it to body tag. For this javascript code will be

var shadow = $('<div id="shadowElem"></div>'); $(document).ready(function() {     $('body').prepend(shadow); });

Now adding some style to it.

#shadowElem {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: black;     opacity: 0.3; }

Now we need to create our popup on top of this shadow element. Lets call it drop element. We are calling it drop element because we want to add some effect like to coming down from top to middle. To create popup html put following html tags inside your page body tag. This will hold our popup contents.

<div id="dropElem"><!-- wrapper -->     <div id="dropContent"><!-- Inside this tag put your popup contents -->         <div id="dropClose">X</div><!-- this will serve as close button -->         <img src="http://beautiful-island.50webs.com/beautiful-island/beautiful-island.jpg" alt="blue" /><!-- using this image as demo -->     </div> </div>

Our drop element needed to be hidden at first at should be on top of every other content of our page. Also we needed to position our close button properly. Now css to achieve is

#dropElem {     display: none;     position: absolute;     top: 0;     border-radius: 10px 10px 10px 10px;     box-shadow: 0 0 25px 5px #999;     padding: 20px;     background: #fff; } #dropContent {     position: relative; } #dropClose {     position: absolute;     z-index: 99999;     cursor: pointer;     top: -32px;     right: -30px;     padding: 5px;     background-color: black;     border-radius: 6px 6px 6px 6px;     color: #fff; }

Now we need to position our drop element in the middle of the page with some animation. First we are going to calculate the left and top position for the popup to place it on the middle of the screen. To do this we need to know the dimension of the view port and dimension of our popup. We can get width and height of the view port by $(window).width() and $(window).height() and our popup content width and height can be obtain by $(‘#dropElem’).outerWidth(true) and $(‘#dropElem’).outerHeight(true). If you want to know more about outerWitdth and outerHeight methods please click here and here. Now our popup left position will be subtraction between half of view port width and half of our drop element width. We can get the top position in the same way by subtracting half of view port height and half of our drop element height. We must do this calculation inside window load event. Otherwise we might get unexpected results. After this we are going place our popup top middle of the view port and from there we shall animate this to center. Here is our code.

var speed = 1000; //animation speed   $(window).load( function() {     screenHeight = $(window).height();     screenWidth = $(window).width();     elemWidth = $('#dropElem').outerWidth(true);     elemHeight = $('#dropElem').outerHeight(true)           leftPosition = (screenWidth / 2) - (elemWidth / 2);     topPosition = (screenHeight / 2) - (elemHeight / 2);                   //place drop element on top middle of screen     $('#dropElem').css({         'left' : leftPosition + 'px',         'top' : -elemHeight + 'px'     });             //some animation .. coming down from top     $('#dropElem').show().animate({         'top' : topPosition     }, speed);     //change opcity of shadow element     shadow.animate({         'opacity' : 0.7     }, speed);     //close button     $('#dropClose').click( function() {         shadow.animate({             'opacity' : 0         }, speed);         $('#dropElem').animate({         'top' : -elemHeight + 'px'     }, speed, function() {             shadow.remove();             $(this).remove();         });     }); });

This is the full code. Just Copy The entire code and save in a html file and run html file and view the result.

<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    var shadow = $('<div id="shadowElem"></div>');
    var speed = 1000;
    $(document).ready(function() {
        $('body').prepend(shadow);
    });
    $(window).load( function() {
        screenHeight = $(window).height();
        screenWidth = $(window).width();
        elemWidth = $('#dropElem').outerWidth(true);
        elemHeight = $('#dropElem').outerHeight(true)
        
        leftPosition = (screenWidth / 2) - (elemWidth / 2);
        topPosition = (screenHeight / 2) - (elemHeight / 2);
        
        $('#dropElem').css({
            'left' : leftPosition + 'px',
            'top' : -elemHeight + 'px'
        });
        $('#dropElem').show().animate({
            'top' : topPosition
        }, speed);
        
        shadow.animate({
            'opacity' : 0.7
        }, speed);
        
        $('#dropClose').click( function() {
            shadow.animate({
                'opacity' : 0
            }, speed);
            $('#dropElem').animate({
            'top' : -elemHeight + 'px'
        }, speed, function() {
                shadow.remove();
                $(this).remove();
            });
            
        });
    });
    
    
    
</script>
<style type="text/css">
#dropElem {
    display: none;
    position: absolute;
    top: 0;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999;
    padding: 20px;
    background: #fff;
}
#shadowElem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
}
#dropContent {
    position: relative;
}
#dropClose {
    position: absolute;
    z-index: 99999;
    cursor: pointer;
    top: -32px;
    right: -30px;
    padding: 5px;
    background-color: black;
    border-radius: 6px 6px 6px 6px;
    color: #fff;
}

</style>
</head>
<body>
    <div id="dropElem">
        <div id="dropContent">
            <div id="dropClose">X</div>
            <img src="http://beautiful-island.50webs.com/beautiful-island/beautiful-island.jpg" alt="blue" />
        </div>
    </div>
    <h3>Hello world</h3>
</body>
</html>

That’s all. Thank you for reading this.