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>
