时间:2021-07-01 10:21:17 帮助过:25人阅读
- <!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>
以上就是什么是js特效遮罩层的详细内容,更多请关注Gxl网其它相关文章!