<script type="text/javascript">
$(document).ready(function () {
//select
all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel
the link behavior
e.preventDefault();
//Get
the A tag
var
id = $(this).attr('href');
//Get
the screen height and width
var
maskHeight = $(document).height();
var
maskWidth = $(window).width();
//Set
heigth and width to mask to fill up the whole screen
$('#mask').css({
'width': maskWidth, 'height':
maskHeight });
//transition
effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.8);
//Get
the window height and width
var
winH = $(window).height();
var
winW = $(window).width();
//Set
the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2 );
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition
effect
$(id).fadeIn(500);
});
//if
mask is clicked
$('#mask').click(function () {
$get("<%=txtUN.clientID %>").value
= "";
$get("<%=txtPass.clientID %>").value
= "";
$(this).fadeOut(500,
'', 'slow');
$('.window').fadeOut(500,
'', 'slow');
});
//
When close button clicked
$('#Close').click(function (e) {
e.preventDefault();
$get("<%=txtUN.clientID %>").value
= "";
$get("<%=txtPass.clientID %>").value
= "";
$get('MSG').innerHTML
= "";
$('#mask').fadeOut(500,
'', 'slow');
$('.window').fadeOut(500,
'', 'slow');
});
//
when browser resize
$(window).resize(function () {
var
box = $('#boxes .window');
//Get
the screen height and width
var
maskHeight = $(document).height();
var
maskWidth = $(window).width();
//Set
height and width to mask to fill up the whole screen
$('#mask').css({
'width': maskWidth, 'height':
maskHeight });
//Get
the window height and width
var
winH = $(window).height();
var
winW = $(window).width();
//Set
the popup window to center
box.css('top', winH / 2 - box.height() / 2 );
box.css('left', winW / 2 - box.width() / 2);
});
});
</script>
CSS
<style type="text/css">
body{font-family: Verdana;font-size: 10pt;}
a{color: #333;text-decoration: none;}
a:hover{color: #ccc;text-decoration: none;}
#mask{position: absolute;left: 0;top: 0;z-index: 9000;
background-color:
#000;display: none;}
#boxes
.window{position:
fixed;left: 0;top: 0;width: 440px;
height: 200px;display: none;z-index: 9999;
padding: 20px;}
#boxes
#dialog{width:
375px;height: 203px;padding: 10px;
background-color: #ffffff;}
#boxes
#dialog1{width:
375px;height: 203px;}
#dialog1
.d-login{float:
left;width: 180px;height: 53px;margin-left: 109px;}
.txtBox{height: 25px;margin: 10px;width: 200px;}
.loginbtnC{background-image: url("Images/ImgCancel.jpeg");
border: medium none;height: 32px;width: 80px;}
.loginbtnL{background-image: url("Images/loginImage.jpeg");}
</style>
HTML
<div id="boxes">
<!-- Start
of Login Dialog -->
<div id="dialog1" class="window" style="display: none;">
<fieldset style="background-color: #FFF; border-radius: 25px;
-webkit-border-radius: 25px;">
<legend style="margin-left: 15px;"> LOGIN</legend>
<div style="padding-top: 10px; text-align: center;">
<span>UserName :</span>
<asp:TextBox ID="txtUN" CssClass="txtBox" runat="server"
<asp:TextBox ID="txtUN" CssClass="txtBox" runat="server"
placeholder="Enter UserName"></asp:TextBox>
<br />
<br />
<span>Password :</span>
<asp:TextBox ID="txtPass" CssClass="txtBox" runat="server"
placeholder="Enter
Password"></asp:TextBox>
</div>
<div class="d-login">
<asp:Button runat="server"
ID="btnLogin"
CssClass="loginbtnC
loginbtnL" />
<input id="Close" type="button"
class="loginbtnC"
/>
</div>
</fieldset>
</div>
<!--
End of Login Dialog -->
<!--
Mask to cover the whole screen -->
<div id="mask">
</div>
</div>
No comments:
Post a Comment