AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

js遮罩效果制作弹出注册界面效果

51自学网 http://www.wanshiok.com
js遮罩效果,js弹出注册界面,js注册界面

本文实例为大家分享了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>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


js遮罩效果,js弹出注册界面,js注册界面  
上一篇:微信小程序实现图片自适应(支持多图)  下一篇:assert()函数用法总结(推荐)