半透明登录界面

现在web站点中的那个半透明登录框,在此简单写一个,原理是一样的,主要为了记录与说明:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>1</title>
 <style type="text/css">
 /* 全局外边框内边框清0 */
 *{
 margin: 0%;
 padding: 0%;
 }
 /* 用户登录框大小 */
 .login{
 padding: 30px;
 border: 1px solid purple;
 width: 300px;
 margin: 100px auto;
 text-align: center;
 position: relative;
 /* 默认不可见(重点) */
 display: none;
 /* 这里是设置在最上层 */
 z-index: 2;
 background-color: beige;
 }
 /* 这个是一个半透明背景 */
 .bg{
 width: 100%;
 height: 700px;
 background-color: rgba(0,0,0,0.2);
 position: absolute;
 top: 0%;
 /* 设置它比登录框低一层 */
 z-index: 1;
 /* 这是设置CSS不可见(重点) */
 display: none;
 } 
 /* 这是设置右上角那个关闭按键 */
 .del{
 cursor: pointer;
 color: red;
 position: absolute; 
 top: 10px;
 right: 10px;
 }
 </style>
</head>
<body>
 <!-- 
 1,点击按钮出现半透明遮罩层和弹出框。
 -->
 <input type="button" class="button" value="登录">
 <div class="login">
 <span class="del">X</span>
 帐号:<input type="text" name="" placeholder="username"> <br>
 密码:<input type="password" name="" placeholder="password"><br>
 <input type="button" value="登录">
 </div>
 <div class="bg"></div>
</body>
<script>
 // 当点 登录时,修改login 与 bg 的css中属性: display= 'block'
 var bot = document.querySelector(".button");
 bot.onclick = function(){
 var loin = document.querySelector('.login');
 var bgs = document.querySelector(".bg");
 loin.style.display='block';
 bgs.style.display='block';
 }
 // 当点关闭时 修改login 与 bg 的css中属性: display= 'none'
 var dell = document.querySelector(".del");
 dell.onclick = function(){
 var loin = document.querySelector('.login');
 var bgs = document.querySelector(".bg");
 loin.style.display='none';
 bgs.style.display='none';
 }
</script>

</html>
猜你喜欢
