<!DOCTYPE html><html> <head><meta charset="UTF-8"><title></title><style>* { margin: 0px; padding: 0px; } .mask { width: 100%; /*height: 500px;*/ position: fixed; top: 0px; left: 0px; background-color: black; opacity: 0.5; } .show { width: 500px; height: 300px; position: fixed; top: 100px; left: 300px; background-color: white; z-index: 999; } </style></head> <body><!--遮罩层--><p class="mask" hidden="hidden"></p><!--弹出层--><p class="show" hidden="hidden"></p><input type="button" value="点 出 来" onclick="show_plus()" /></body> </html> <script>var mask = document.getElementsByClassName('mask')[0]; var show = document.getElementsByClassName("show")[0]; var c_height = document.documentElement.clientHeight; var c_width = document.documentElement.clientWidth; mask.style.height = c_height + "px"; show.style.left = c_width / 2 - 250 + "px"; show.style.top = c_height / 2 - 150 + "px"; function show_plus() { mask.removeAttribute("hidden"); show.removeAttribute("hidden"); } mask.onclick = function() { mask.setAttribute("hidden", "hidden"); show.setAttribute("hidden", "hidden"); } window.onresize = function() { var c_height = document.documentElement.clientHeight; var c_width = document.documentElement.clientWidth; mask.style.height = c_height + "px"; show.style.left = c_width / 2 - 250 + "px"; show.style.top = c_height / 2 - 150 + "px"; } </script>
Atas ialah kandungan terperinci 什么是js特效遮罩层. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!