jQuery Modal PopUp Window with Animation Effects – with Codes

Sometimes we need to show visitors some important message when they visit your website. It can be done with jQuery Modal (also known as jQuery Popup). Here jQuery is used to open a small message box in the center of the screen. In this message box you can show any message like welcome text, coupons, sale discounts or anything else.

Let’s Start Making Our jQuery Modal

HTML CODE
Our HTML page contains the jQuery Modal, which is shown from our jQuery code when the page is loaded. It has a fading animation effect that will capture the visitor’s attention.

<!--jQuery Modal Popup-->
<div id="modal">
    <a class="close">
        <img id="closeModalImg" src="close.png" alt="close" />
    </a>
    <div id="contentModal">
        <div class="notice-box backgroundColorFFFFFF">
            <img src="goldbuyer1.png" alt="goldbuyer1" />
        </div>
    </div>
</div>
<!--End--> 

We keep our message content inside div with id contentModal, here I am showing only an image inside the jQuery Modal Popup, I also show a cross image at the top right corner (which I have given inside the anchor tag with class close). The jQuery code also closes the modal popup whenever this image is clicked.

jQuery Modal Code

<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery.reveal.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        callModal();
        /*Function for calling modal*/
        function callModal() {
            $('#modal').reveal({ // The item which will be opened with reveal
                animation: 'fadeAndPop',      // fade, fadeAndPop, none
                animationspeed: 5000,         // how fast animtions are
                closeonbackgroundclick: true, // if you click background will modal close?
                dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
                return false;
            }
        /*End*/
    });
</script>

First reference the main jQuery file jquery.min.js, then reference the custom modal popup jQuery file jquery.reveal.js. Finally calling the function callModal() which shows the jQuery Modal Popup.

CallModal Function

• animation – performs animation with jQuery Animate method, it can have three values either fade, fadeAndPop or none.
• animationspeed – used to set the speed of jQuery animation in milliseconds.
• closeonbackgroundclick – can have two values either true, false.
• dismissmodalclass – the class of html element whose click closes the jQuery modal.

CSS OF THE PAGE

body {
    background-color: #000000;
}

#content {
    width: 1280px;
    margin: 0 auto;
}

.backgroundColorFFFFFF {
    background-color: #FFFFFF;
}

/*Jquery Modal*/
#modal {
    visibility: hidden;
    height: auto;
    padding: 8px;
    background: rgba(0,0,0,.3);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: absolute !important;
    left: 15%;
    top: 5% !important;
    width: 960px;
    margin: 0 auto;
    z-index: 101;
}

#modalImage {
    visibility: hidden;
    padding: 8px;
    background: rgba(0,0,0,.3);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: fixed !important;
    top: 30% !important;
    left: 50% !important;
    margin-top: -94px !important;
    margin-left: -220px !important;
    z-index: 101;
}

#heading {
    background: -moz-linear-gradient(center top, #F9F9F9, #E9E9E9);
    background: -webkit-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-color: #F9F9F9;
    border-bottom: 1px solid #BABABA;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -1px 0 #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #444444;
    font-size: 14px;
    font-weight: bold; /*height: 44px;*/
    line-height: 25px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
}

#contentModal {
    background: #000000;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.25);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.25);
    box-shadow: 0px 1px 3px rgba(0,0,0,.25);
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
}

#voucherDiv {
    background: #fcfcfc;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.25);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.25);
    box-shadow: 0px 1px 3px rgba(0,0,0,.25);
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    font-size: 15px;
    padding: 10px;
    text-align: justify;
    font-weight: bold;
    color: #4F6F61;
}

#contentModal p {
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    line-height: 22px;
    color: #555555;
    width: 100%;
    float: left;
    margin: 0px;
}

    #contentModal p span {
        float: left;
    }

    #contentModal p input, #contentModal p textarea {
        float: right;
    }

    #contentModal p.errorMessageParagraph {
        height: 20px;
        text-align: center;
        font-size: 9px;
        font-weight: 100;
        color: Red;
    }

.reveal-modal-bg {
    position: fixed;
    height: 100%;
    width: 100%; 
    background-color: #000000;
    z-index: 100;
    display: none;
    top: 0;
    left: 0;
}

.button.brown {
    background-color: #2E1700;
    background: -moz-linear-gradient(center top, #2E1700 0%, #2E1700 90%, #2E1700 95%, #2E1700 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(top, #2E1700, #2E1700);
    border: 1px solid #B0333E;
    margin: 5px 35px 0 35px;
}

.button.red {
    background: -moz-linear-gradient(center top, #F87288 0%, #F34755 90%, #E1414D 95%, #CE3B46 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(top, #F87288, #F34755);
    border: 1px solid #B0333E;
    margin: 0 35px 0 5px;
}

a.button {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 33px;
    line-height: 33px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    width: 138px;
    text-align: center;
    cursor: pointer;
}

a.close {
    position: absolute;
    margin-top: -25px;
    margin-left: 940px;
    cursor: pointer;
}
/*End*/ 

Thus in this way you can create a jQuery Modal Popup with Animation Effects in our website, and show our own messages, images or custom features to the users whenever they open the website.

DEMO DOWNLOAD