登录框一开始是隐藏的，只有用户点击链接才弹出显示，弹出后居中显示网页背景变灰。
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>点击链接弹出居中登录框效果_武鸣人</title>
<style>
#clarityDiv {
width:100%;
height:100%;
background:#000;
position:absolute;
z-index:10;
right:16px;
z-index:99;
-moz-opacity:0.4;
opacity:0.4;
filter:alpha(opacity=30);
}
#window {
border:solid 1px #dedcd8;
padding:1px;
background:#fff;
position:absolute;
z-index:100;
font-size:12px
}
#window #window_title {
height:28px;
line-height:28px;
padding:0 0 0 8px;
font-weight:bold;
color:#666
}
#window #window_title span {
cursor:pointer
}
#window #window_title .close {
float:right;
width:30px;
height:18px;
margin:0 30px 0 0
}
#window #window_content {
padding:10px 10px 10px 10px
}
#window #window_content .login {
width:220px;
margin:0 auto
}
#window #window_content .login input.text {
border:solid 1px #bab5a9;
width:150px;
height:19px;
padding:3px 0 0 5px;
}
#window #window_content .login input.text:hover {
border:solid 1px #99cc00;
}
#window #window_content .login input.btn {
border:solid 1px #bab5a9;
height:26px;
line-height:22px
}
#window #window_content .login input.btn:hover {
border:solid 1px #99cc00;
}
#window #window_content .login div {
margin:0 0 9px 0;
*margin:0 0 6px 0;
}
#window #window_content .login #hint {
color:#aaa;
padding:0 0 0 40px
}
#window #window_content .login span {
float:left;
display:block;
height:24px;
line-height:24px;
margin:1px 10px 0 0;
width:30px
}
html,body {
height:100%;
width:100%;
overflow:hidden;
margin:0
}
.corporeity {
position:relative;
width:100%;
height:100%;
overflow-x:auto;
overflow-y:scroll;
background:#f1efec;
cursor:default
}
</style>
<script>
function setLogin(){
var container=document.getElementById("container");
container.innerHTML='<div id="clarityDiv"></div><div id="window" style="width:300px"><div id="window_title"><span class="close" onclick="closewindow()">关闭</span><div id="window_h">用户登录</div></div><div id="window_content"><div class="login"><form class="login" id="login" method="post"><div id="hint">请输入帐号密码！</div><div><span>帐号</span><input type="text" name="user" id="user" class="text"></div><div><span>密码</span><input type="password"id="password" name="password" class="text"></div><div><span></span><input type="button" value="登 录" class="btn"> <input type="button" value="注 册" class="btn"></div></form></div></div></div>'
var divId=document.getElementById("window");
document.getElementById('container').style.display="block";
divId.style.left=(document.body.clientWidth-divId.clientWidth)/2+document.body.scrollLeft+"px";
divId.style.top=(document.body.clientHeight-divId.clientHeight)/2+document.body.scrollTop+"px";
return false;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="container"></div>
<div class="corporeity"><a href="#" onclick="setLogin()">点击这里登陆</a></div>
<script>
function closewindow(){
document.getElementById('container').style.display="none";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处