本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网页名称:js遮罩效果制作弹出注册界面效果
当前URL:https://www.cdcxhl.com/article14/jgpcge.html
成都网站建设公司_创新互联,为您提供网站改版、企业建站、微信小程序、网站收录、定制开发、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联