带有背景锁屏遮罩的弹出层代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了点击按钮弹出带有遮罩层的窗口功能。

比较常见于用户登录后者注册之类的效果,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#btn {
  height: 50px;
  width: 150px;
  margin: 400px auto;
  font-size: 20px;
  background-color: grey;
  text-align: center;
  line-height: 50px;
}
#bg {
  background-color: silver;
  opacity: 0.75;
  position: absolute;
  left: 0;
  top: 0;
  height: 1000px;
  width: 100%;
  z-index: 2;
}
#login {
  width: 500px;
  height: 300px;
  background-color: greenyellow;
  z-index: 3;
  position: fixed;
}
.login-top {
  margin: 0;
  height: 50px;
  width: 500px;
  background-color: aqua;
}
#close {
  float: right;
  width: 40px;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  text-align: center;
  background-color: darkgoldenrod;
}
</style>
<script>
window.onload=function(){
  function show(){
    var btn=document.getElementById('btn');
    var sHeight=document.documentElement.scrollHeight;
    var sWidth=document.documentElement.scrollWidth;
 
     var cHeight=document.documentElement.clientHeight;
 
     var oMask=document.createElement('div');
     oMask.id='bg';
     oMask.style.height=sHeight+'px';
     oMask.style.width=sWidth+"px";
     document.body.appendChild(oMask);
 
     var loginbox=document.createElement('div');
     loginbox.id='login';
     loginbox.innerHTML = '<div class="login-top">'+
                          '<div id="close">×</div>'+
                          '</div><div class="login-mian"></div>';
     document.body.appendChild(loginbox);
 
     oheight=300;
     oWidth=500;
     loginLeft=(sWidth-oWidth)/2;
     loginHeight=(cHeight-oheight)/2;
 
     login=document.getElementById('login');
     login.style.left=loginLeft+'px';
     login.style.top=loginHeight+'px';
 
 
     function close(){
       document.body.removeChild(oMask);
       document.body.removeChild(login);
     }
     document.getElementById('close').onclick = close;
  }
  document.getElementById('btn').onclick=show;
}
</script>
</head>
<body>
<div id='btn'>查看效果</div>
</body>
</html>

带有背景锁屏遮罩的弹出层代码实例,这样的场景在实际项目中还是用的比较多的,关于带有背景锁屏遮罩的弹出层代码实例就介绍到这了。

带有背景锁屏遮罩的弹出层代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容