本文实例为大家分享了js遮罩效果弹出界面的具体代码,供大家参考,具体内容如下
<head> <meta charset="UTF-8"> <title>遮罩</title> <style> * { margin: 0; padding: 0; } #shade{ position: fixed; width: 100%; height: 100%; display: none; } .shade-background{ width: 100%; height: 100%; background-color: #CCCCCC; opacity: 0.5; } #register{ position: relative; background-color: #fff; width: 500px; height: 300px; top: -70%; margin: 0 auto; } </style> </head> <body> <div id="shade"> <div class="shade-background"></div> <div id="register"> 用户名<input type="" name="" id="" value="" /><br /> 密 码<input type="" name="" id="" value="" /><br /> <input type="submit" name="" id="reg" value="注册" /> </div> </div> <div> <input type="button" name="" id="btn" value="弹出遮罩" /> </div> </body> <script> var shade = document.getElementById("shade"); var btn = document.getElementById("btn"); var reg = document.getElementById("reg"); btn.onclick = function(){ shade.style.display = "block" } reg.onclick = function(){ shade.style.display = "none" } </script>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。