今天整理一个实例，如何用js实现弹出登录窗口：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹登录框</title>
<style>
#tanchuang{ （样式设置） position: fixed; （绝对定位）
top: 140px;
left: 415px;
visibility: hidden; （默认隐藏）
overflow: hidden;
background-color:#FFFFFF; （背景颜色）
border:1px solid #878787; （边框设置） border-radius:6px; （圆角设置）
box-shadow:0px 5px 16px #000; （阴影设置）
}
.tanchuang1{
width: 530px;
height: 40px;
border: 1px solid #ccc;
background: #2d2d2d;
border-radius:4px;
}
.denglu_1{
float: left;
position: relative;
top: 10px;
left: 16px;
}
.denglu_1 b{
color: #ffffff;
}
.denglu_2{
float: right;
position: relative;
width: 12px;
height: 13px;
background: url(wangyiyun/img/youneirong/layer.png) no-repeat 0px -93px;
top: 14px;
left: -19px;
}
.denglu_2 span{
color: #888888;
}
.tanchuang2{
width: 299px;
height: 208px;
float: left;
border-right: 1px dashed #ccc;
margin-top: 41px;
background: url( wangyiyun/img/youneirong/platform.png) no-repeat 45px 0px;
}
.tanchuang_input{
width: 225px;
height: 30px;
}
.tanchuangin{
background: #418fd9;
position: relative;
top: 130px;
left:33px;
text-align: center;
border-radius:3px;
border: 1px solid #3984ce;
}
.tanchuanginput{
background: #f6f6f6;
position: relative;
top: 141px;
left:33px;
border-radius:3px;
text-align: center;
border: 1px solid #c4c4c4;
}
.tanchuang3{
width: 228px;
height: 208px;
float: left;
margin-top: 40px;
}
.tanchuangnei{
text-decoration: none;
position: relative;
top: -39px;
left: 50px;
color: #333333;
}
.tanchuang3 li{
margin-top: -8px;
list-style-type: none;
font-size: 13px;
}
.li1,.li3,.li2,.li4{
width: 41px;
height: 47px;
position: relative;
top: -10px;
}
.li1{ background: url(wangyiyun/img/logo.png) no-repeat -148px -664px;
}
.li2{
background: url(wangyiyun/img/logo.png) no-repeat -188px -664px;
}
.li3{
background: url(wangyiyun/img/logo.png) no-repeat -229px -664px;
}
.li4{
background: url(wangyiyun/img/logo.png) no-repeat -269px -664px;
}
</style>
</head><body>
<div class="neishen2" onclick="showPopup(528,325)"><a href="#" ></a></div> （内容）（定义方法showPopup(528,325)）
<div id="tanchuang"> （弹窗内容）
<div class="tanchuang1">
<div class="denglu_1">
<b>登录</b>
</div>
<div class="denglu_2" onclick="hidePopup()"> （定义方法hidePopup()）
</div>
</div>
<div class="tanchuang2">
<a href="#"><input type="button" class="tanchuang_input tanchuangin" value="手机号登录"></a>
<a href="#"><input type="button" class="tanchuang_input tanchuanginput" value="注册"></a>
</div>
<div class="tanchuang3">
<ul>
<li class="nnli">
<div class="li1 neili"></div>
<a href="#" class="tanchuangnei">微信登录</a>
</li>
<li>
<div class="li2 neili"></div>
<a href="#" class="tanchuangnei">QQ登录</a>
</li>
<li>
<div class="li3 neili"></div>
<a href="#" class="tanchuangnei">微博登录</a>
</li>
<li>
<div class="li4 neili"></div>
<a href="#" class="tanchuangnei">网易邮箱账号登录</a>
</li>
</ul>
</div>
</div></body>
<script type="text/javascript" src="js/pengyou.js">
function showPopup(w,h){ （定义方法，弹出窗口）
var popUp = document.getElementById("tanchuang"); （获取元素）
popUp.style.top = "140px"; （设置属性，弹窗距顶部高度）
popUp.style.left = "415px"; （设置属性，弹窗距左边宽度）
popUp.style.width = w + "px"; （设置属性，弹窗宽度）
popUp.style.height = h + "px"; （设置属性，弹窗高度）
popUp.style.visibility = "visible"; （设置属性，弹框窗口显示）
} function hidePopup(){ （定义方法，隐藏窗口）
var popUp = document.getElementById("tanchuang");
popUp.style.visibility = "hidden"; （设置窗口的隐藏属性）
} </script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
