<!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玻璃窗口
原文地址：http://www.cnblogs.com/xingkongly/p/7672581.html