JQuery 登录窗口_后面窗口锁定

最新推荐文章于 2021-06-18 15:48:27 发布

永远爱好写程序

最新推荐文章于 2021-06-18 15:48:27 发布

阅读量1.9k

点赞数

分类专栏： Jquery_高级

本文链接：https://blog.csdn.net/limlimlim/article/details/9273475

版权

Jquery_高级专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
#shadow
{
width:100%;
height:100%;
opacity:0.2;
filter:Alpha(Opacity=20);
background-color:Gray;
z-index:0;
position:absolute;
left:0px;
top:0px;
display:none;
}
#login{width:220px;border:1px solid red;display:none;position:absolute; }
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $Shadow;
var $Login;
$(function () {
$Shadow = $("#shadow");
$Login = $("#login");

$("#btnShow").click(function () {
$Shadow.show();
var leftPx = ($Shadow.width() - $Login.width()) / 2 + "px";
var topPx = ($Shadow.height() - $Login.height()) / 2 + "px";
$Login.css({ "left": leftPx, "top": topPx });
$Login.slideDown(2000);
});

$("#btnCancel").click(function () {
$Login.slideUp(3000, function () {
$Shadow.hide();
});
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="显示登录" />
<div id="shadow"></div>
<div id="login">
<table>
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="txtUserName" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="text" id="txtPassword" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" id="btnLogin" value="登录" />
<input type="button" id="btnCancel" value="取消" />
</td>
</tr>
</table>
</div>
</body>
</html>