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


Posted in Javascript onJanuary 25, 2017

本文实例为大家分享了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遮罩效果制作弹出注册界面效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
assert()函数用法总结(推荐)
Jan 25 #Javascript
canvas知识总结
Jan 25 #Javascript
基于JavaScript实现自定义滚动条
Jan 25 #Javascript
基于javascript实现数字英文验证码
Jan 25 #Javascript
js阻止移动端页面滚动的两种方法
Jan 25 #Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 #Javascript
json数据处理及数据绑定
Jan 25 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php动态生成函数示例
2014/03/21 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python制作爬虫抓取美女图
2016/01/20 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
班主任工作经验材料
2014/02/02 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
欢迎词怎么写
2015/01/23 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
毕业论文致谢范文
2015/05/14 职场文书
行政处罚决定书
2015/06/24 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Python学习之包与模块详解
2022/03/19 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS