Creating a jQuery Modal From Start

Last Updated: January 31, 2017

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

Let’s Start Making Our jQuery Modal

HTML CODE
Our HTML page contains the jQuery Popup which we show from our jQuery code on page load. It has a fading animation effect that will capture all 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 we are showing only an image inside the modal popup, we also show a cross image at the top right corner (which we have given inside the anchor control with class ‘close’). Our jQuery closes the modal popup whenever the image inside this anchor 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 we reference the main jQuery file ‘jquery.min.js’, then we reference the custom modal popup jQuery file‘jquery.reveal.js’. Finally we are calling the function ‘callModal()’ which shows the jQuery modal popup.

CallModal function-

‘animation’ – 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 modal popup.

CSS OF THE PAGE

body {
    background-color: #000000;
}

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

.backgroundColorFFFFFF {
    background-color: #FFFFFF;
}
/*Jquery Popup*/
#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 we can create a jQuery 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

CodeProject