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.
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.
<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.
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.
Share this article -