一个漂亮的登陆框弹出特效，当用户点击登陆按钮后弹出显示，在登陆框上带关闭按钮供用户使用。
<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 type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
font-style:normal;
list-style-type:none;
text-decoration:none;
}
div#wuming_ren input#w_wuming_ren {
width:78px;
height:39px;
border:none;
cursor:pointer;
position:absolute;
top:40px;
left:100px;
background:transparent url('/img/20240321_www_wuming_ren_1.png') 0 -70px no-repeat;
}
div#my_wuming_ren {
position:absolute;
top:0;
left:0;
background:#fff;
filter:alpha(opacity=20);
-moz-opacity:0.2;
z-index:100;
}
div#login {
position:absolute;
top:75px;
left:100px;
width:293px;
z-index:200;
}
div#login h2 {
height:26px;
padding-top:3px;
padding-left:25px;
background:transparent url('/img/20240321_www_wuming_ren_1.png') -84px -70px no-repeat;
}
div#login h2 input {
height:18px;
width:18px;
float:right;
border:none;
cursor:pointer;
margin:2px 6px 0 0;
background:transparent url('/img/20240321_www_wuming_ren_1.png') 0 -169px no-repeat;
}
div#login h2 a {
display:block;
float:left;
width:83px;
height:26px;
line-height:26px;
text-align:center;
text-decoration:none;
color:#666;
}
div#login h2 a.cur {
color:#f00;
background:transparent url('/img/20240321_www_wuming_ren_1.png') 0 -187px no-repeat;
}
div#login ul {
padding:14px 0 18px 12px;
background:transparent url('/img/20240321_www_wuming_ren_1.png') -84px bottom no-repeat;
}
div#login ul li {
padding-left:60px;
margin-top:10px;
display:inline-block;
}
div#login ul li {
display:block;
}
div#login ul li:after {
content:"youdian";
clear:both;
display:block;
height:0;
visibility:hidden;
}
div#login ul li tt {
float:left;
width:60px;
margin-left:-70px;
text-align:right;
line-height:22px;
color:#444;
}
div#login ul li div input.cell, div#login ul li div input.cell2 {
height:16px;
padding:2px;
line-height:16px;
width:179px;
border:1px #dcdcdc solid;
color:#666;
}
div#login ul li div input.cell2 {
width:50px;
}
div#login ul li div label {
color:#666;
cursor:pointer;
}
div#login ul li div img {
margin-bottom:-7px;
margin-left:8px;
}
* html div#login ul li div img {
margin-bottom:-4px;
}
*+html div#login ul li div img {
margin-bottom:-4px;
}
div#login ul li div input#fnlogin {
width:59px;
height:21px;
cursor:pointer;
border:none;
margin-right:15px;
background:transparent url('/img/20240321_www_wuming_ren_1.png') 0 -148px no-repeat;
}
div#login ul li p {
padding-top:4px;
color:#f00;
}
body {
}
</style>
</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="wuming_ren">
<input id="w_wuming_ren" type="button" title="" />
</div>
<div id="my_wuming_ren" style="display:none;"></div>
<div id="login" style="display:none;">
<h2>
<input id="out_wuming_ren" type="button" title="退出登录" />
<a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a>
</h2>
<ul>
<form id="LoginForm" name="LoginForm" action="" method="post" enctype="multipart/form-data" >
<li>
<input id="loginType" name="loginType" type="hidden"/>
<tt><label id="logtype" for="email">Email:</label></tt>
<div><input id="username" name="username" type="text" class="cell"/></div>
</li>
<li>
<tt><label for="password">密 码:</label></tt>
<div><input id="password" name="password" type="password" class="cell" /></div>
</li>
<li>
<tt></tt>
<div><input id="reme" name="wuming.ren" type="checkbox" /><label for="reme">下次自动登录</label>
</div>
</li>
<li>
<tt></tt>
<div><input id="fnlogin" type="button"/><a href="https://www.wuming.ren">忘记密码</a></div>
</li>
</form>
</ul>
</div>
<script type="text/javascript">
function ks() {
return true;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onerror=ks
function g(obj) {
return document.getElementById(obj);
}
var login = {
title:null,
show:function(){
var sWidth,sHeight;
sWidth = screen.width;
sWidth = document.body.offsetWidth;
sHeight=document.body.offsetHeight;
if (sHeight<screen.height){sHeight=screen.height;}
g("my_wuming_ren").style.width = sWidth + "px";
g("my_wuming_ren").style.height = sHeight + "px";
g("my_wuming_ren").style.display = "block";
g("login").style.display = "block";
g("login").style.right = g("wuming_ren").offsetLeft + "px";
// window.status = g("wuming_ren").offsetLeft;
},
hide:function(){
g("my_wuming_ren").style.display = "none";
g("login").style.display = "none";
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
g("w_wuming_ren").onclick = function(){
login.show();
this.blur();
this.style.backgroundPosition = "0 -109px";
};
g("fnlogin").onclick = function() {
// The following 5 lines of code is used to get the login type & pass to the form
// One More line of code is insert to root_index.jsp to capture the hidden value
if (document.getElementById("logtype").innerHTML == "Email:") {
document.getElementById('loginType').value = 'email';
} else {
document.getElementById('loginType').value = 'mobile';
}
document.LoginForm.submit();
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
g("out_wuming_ren").onclick = function(){login.hide();g("w_wuming_ren").style.backgroundPosition = "0 -70px";};
var aa = g("login").getElementsByTagName("a");
var aTab = new Array();
for(var i=0; i<aa.length; i++){
if(aa.parentNode.nodeName == "H2"){
aTab.push(aa);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
for(var j=0; j<aTab.length; j++){
aTab[j].onclick = function(){
this.blur();
if (this.className != "cur"){
for(var k=0; k<aTab.length; k++){aTab[k].className = ""};
this.className = "cur"
g("logtype").innerHTML = this.name + ":";
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<script language="javascript">
login.hide();
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处