jQuery Modal PopUp Window with Animation Effects – with Codes

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

Let’s Start Making Our jQuery Modal

HTML CODE

The HTML page contains the jQuery Modal, which is shown from the jQuery code. It has a fading animation effect that will capture the visitor’s attention easily.

<!--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--> 

I kept the message content inside div with id contentModal. Here I am showing only an image (inside the jQuery Modal Popup) and a cross image at the top right corner

The cross image is given inside the anchor tag having class called close.

The jQuery code 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’s JS – jquery.reveal.js. Finally call the function – callModal() which shows the jQuery Modal Popup.

CallModal Function

• animation – performs animation with jQuery Animate method, it can have 3 values which are fade, fadeAndPop and none.
• animationspeed – used to set the speed of jQuery animation in milliseconds.
• closeonbackgroundclick – can have two values, either true or 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 any website, and show your own messages, images or custom features to the users, whenever they open the website.

Kindly check these links:

DEMO DOWNLOAD

Do you want to learn ASP.NET Core, then check out these series of tutorial that will make you a full professional developer – ASP.NET Core Tutorials.