Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/myscript/public_html/codes-snippets/config.php on line 6
Jquery Dialog Box Example Code - Jquery

Jquery Dialog Box Example Code - Jquery

How to create simple dialog box using jquery?

Snippet Code


  
Rate this page :
  [ 1 votes]

This code is used to create a simple dialog window. Using this dialog box you can interact with user easily. The below code is used to create a popup window.

<script type='text/javascript'> $(document).ready(function() { $('a.login-window').click(function() { $('.login-popup').fadeOut(300); var loginBox = '#popupLogin'; $offsett=$(this).offset().top; $(loginBox).fadeIn(300); $('body').append('<div id="mask"></div>'); $('#mask').fadeIn(300); return false; }); $('a.close, #mask').live('click', function() { $('#mask , .login-popup').fadeOut(300 , function() { $('#mask').remove(); }); return false; }); }); function hidepopup(){$('#mask , .login-popup').fadeOut(300);} </script> <style> .pop_title { background:#dadada; height:33px; border-bottom:1px solid #cccccc; font-size:14px; font-weight:bold; text-align:left;padding:10px 0 0 0; } .popup { margin:0px auto;position:relative;padding:5px;width:auto; border:#b8b8b8 1px solid;border-radius:5px;box-shadow:0px 0px 10px #3d3d3d; } .popup_con { margin:0 auto; padding:0px; width:auto; background:#fff; border:#5a5a5a 1px solid; border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; } .close { position:absolute;width:32px;height:33px; right:-10px;top:-17px;z-index:100; } #mask { display: none;position: fixed; left: 0; top: 0; z-index: 10;width: 100%; height: 100%;z-index: 999; } .login-popup{ display:none;left:550px;top:100px;position: absolute;z-index: 99999; } </style> <div align=center> <a id="fancyLogin" class='login-window' href="#popupLogin" style='text-decoration:none;'> <input type='button' class='green_button' value="Click"> </a> </div> <div id="popupLogin" class="login-popup" align='center'> <div class="popup"> <div class="popup_con"> <div class="pop_title"> Alert Box</div> Welcome to hscripts.com!!</br> <input type='button' value='OK' onclick='hidepopup()'> </div> </div> </div>

Tags


Ask Questions

Ask Question