2018-1-17 js弹出div登录窗口

　　今天整理一个实例，如何用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{
　　　　　　 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;
　　　　　　 12px;
　　　　　　height: 13px;
　　　　　　background: url(wangyiyun/img/youneirong/layer.png) no-repeat 0px -93px;
　　　　　　top: 14px;
　　　　　　left: -19px;
　　　　}
　　　　.denglu_2 span{
　　　　　　color: #888888;
　　　　}
　　　　.tanchuang2{
　　　　　　 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{
　　　　　　 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{
　　　　　　 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{
　　　　　　 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 >网易邮箱账号登录</a>
　　　　　　　　</li>
　　　　　　</ul>
　　　　</div>
　　</div>

</body>

　　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>

2018-1-17 js弹出div登录窗口

相关推荐