js写一个弹出窗

功能介绍:点击一个按钮,然后页面会弹出一个窗口,而页面原来的内容会保持不变,只是在其页面上加了一个遮罩层,设置了不透明度,弹出的窗口可设置在固定位置,也可以自由设定,常见于网站的登录按钮。
html页面:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现一个弹出框</title>
<style type="text/css">
/*预先写好弹出窗的样式*/
#menu{height: 900px;}
#close{ 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:5px; 
    text-indent:-999em;
    background-color:blue;
    }
#mask{ 
    background-color:pink;
    opacity:0.5;
    filter: alpha(opacity=50); 
    position:absolute; 
    left:0;
    top:0;
    z-index:1;
    }
#login{ 
    position:fixed;
    z-index:2;
    }
.loginCon{ 
    position:relative; 
    width:670px;
    height:380px;
    /*background:url(img/loginBg.png) #2A2C2E center center no-repeat;*/
    background-color: #ccc;
    }
</style>

</head>
<body>
<div id="menu">
    <div id="login-area">
      <button id="btnLogin">登录</button>
    </div>
</div>
</body>
</html>

js代码:

<script>
function openNew(){
    //获取页面的高度和宽度
    var sWidth=document.body.scrollWidth;
    var sHeight=document.body.scrollHeight;
    
    //获取页面的可视区域高度和宽度
    var wHeight=document.documentElement.clientHeight;
    
    var oMask=document.createElement("div");
        oMask.id="mask";
        oMask.style.height=sHeight+"px";
        oMask.style.width=sWidth+"px";
        document.body.appendChild(oMask);
    var oLogin=document.createElement("div");
        oLogin.id="login";
        oLogin.innerHTML="<div class='loginCon'><div id='close'>关闭</div></div>";
        document.body.appendChild(oLogin);
    
    //获取登陆框的宽和高
    var dHeight=oLogin.offsetHeight;
    var dWidth=oLogin.offsetWidth;
        //设置登陆框的left和top
        oLogin.style.left=sWidth/2-dWidth/2+"px";
        oLogin.style.top=wHeight/2-dHeight/2+"px";
    //点击关闭按钮
    var oClose=document.getElementById("close");
    
        //点击登陆框以外的区域也可以关闭登陆框
        oClose.onclick=oMask.onclick=function(){
                    document.body.removeChild(oLogin);
                    document.body.removeChild(oMask);
                    };
                    };
                    
    window.onload=function(){
            var oBtn=document.getElementById("btnLogin");
                //点击登录按钮
                oBtn.onclick=function(){
                    openNew();
                    return false;
                    }
                
        }
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值