9.29特效 弹出层~
Posted sistrong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了9.29特效 弹出层~相关的知识,希望对你有一定的参考价值。
<title></title> <style> * { margin: 0px; padding: 0px; } .mask { width: 100%; height: 500px; background-color: black; opacity: 0.5; position: fixed; top: 0px; left: 0px; z-index: 400; } .out { width: 300px; height: 200px; background-color: green; position: fixed; /*top: 100px; left: 100px;*/ z-index: 998; } </style> </head> <body> <input type="button" value="弹出" id="btn1" /> <div class="mask" hidden="hidden"></div> <div class="out" hidden="hidden"></div> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> </body> </html> <script> var mask = document.getElementsByClassName("mask")[0]; var out = document.getElementsByClassName("out")[0]; var btn1 = document.getElementById("btn1"); var c_height = document.documentElement.clientHeight; var c_width = document.documentElement.clientWidth; var top_ = c_height / 2 - 100; var left = c_width / 2 - 150; mask.style.height = c_height + "px"; out.style.top = top_ + "px"; out.style.left = left + "px"; btn1.onclick = function() { mask.removeAttribute("hidden"); out.removeAttribute("hidden"); } mask.onclick = function() { mask.setAttribute("hidden", "hidden"); out.setAttribute("hidden", "hidden"); } window.onresize = function() { var c_height = document.documentElement.clientHeight; var c_width = document.documentElement.clientWidth; var top_ = c_height / 2 - 100; var left = c_width / 2 - 150; mask.style.height = c_height + "px"; out.style.top = top_ + "px"; out.style.left = left + "px"; } </script>
自己再打几次 巩固一下
以上是关于9.29特效 弹出层~的主要内容,如果未能解决你的问题,请参考以下文章