JS小功能系列13玻璃窗口
Posted 学会五大阵法就会JS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS小功能系列13玻璃窗口相关的知识，希望对你有一定的参考价值。
<!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>Document</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } button { outline: none; border: none; } li { list-style-type: none; } .show { display: block!important; } .active {} body { position: absolute; width: 100%; height: 100%; } body>div>div { display: none; } .main { width: 3000px; height: 2000px; background: #08c; } .head { background: orange; } .loginBtn { position: fixed; top: 0; background: red; padding: 10px 20px; } .glassView { position: absolute; width: 100%; height: 100%; background: #aaa; opacity: 0.9; filter: alpha(opacity=50); } .login { width: 500px; height: 400px; position: absolute; background: #fff; } .login .loginView { padding: 10px; border-bottom: 1px solid #000; } .login .loginView .fork { float: right; } .login .form { padding: 100px; } .login .form li { padding: 5px 0px; text-align: center; } .login .form ul li span { display: inline-block; width: 100px; text-align: right; } .login .form ul li button { padding: 5px 10px; background: orange; color: #fff; } </style> <script> window.onload = function () { var head = document.querySelector(".head"), glassView = document.querySelector(".glassView"), fork = document.querySelector(".fork"), loginBtn = document.querySelector(".loginBtn"), login = document.querySelector(".login"), main = document.querySelector(".main"), body = document.body; //初始化玻璃窗口水平垂直居中 login.style.left = (body.offsetWidth - 500) / 2 + "px"; login.style.top = (body.offsetHeight - 400) / 2 + "px"; //点击登录按钮显示玻璃窗口 loginBtn.onclick = function () { head.setAttribute("class", " "); glassView.setAttribute("class", "glassView show"); body.style.overflow = "hidden"; } //点击叉号隐藏玻璃窗口 fork.onclick = function () { head.setAttribute("class", "show"); glassView.setAttribute("class", "glassView"); body.style.overflow = "scroll"; } //改变浏览器窗口大小时调整left，top保证其水平垂直居中 window.onresize = function () { login.style.left = (body.offsetWidth - 500) / 2 + "px"; login.style.top = (body.offsetHeight - 400) / 2 + "px"; } //滚动条移动时 window.onscroll = function () { //兼容性 var topMove = window.pageYOffset //safari || document.documentElement.scrollTop || document.body.scrollTop || 0; glassView.style.top = topMove + "px"; // var leftMove = window.pageXOffset //safari // || document.documentElement.scrollLeft // || document.body.scrollLeft // || 0; // glassView.style.left = leftMove + "px"; } } </script> </head> <body> <div class="main"> <div class="head show"> 反反复复方法非法方法非法方法非法方法 <div class="loginBtn">登录</div> </div> <div class="glassView "> <div class="login"> <div class="loginView"> <span>用户登录窗口</span> <span class="fork">X</span> </div> <div class="form"> <ul> <li>购物之前必须先登录</li> <li> <span>用户名:</span> <input type="text"> </li> <li> <span>密码:</span> <input type="password"> </li> <li> <button>登录</button> </li> </ul> </div> </div> </div> </div> </body> </html>
以上是关于JS小功能系列13玻璃窗口的主要内容，如果未能解决你的问题，请参考以下文章