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 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
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部分常见问题总结
2008/03/27 PHP
php安装swoole扩展的方法
2015/03/19 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
pandas 层次化索引的实现方法
2019/07/06 Python
pow在python中的含义及用法
2019/07/11 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python使用xpath实现图片爬取
2020/09/16 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
求职自荐信格式
2013/12/04 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
护士求职信范文
2014/05/24 职场文书
新员工考核评语
2014/12/31 职场文书
护理专业自我评价
2015/03/11 职场文书
执行力心得体会范文
2016/01/11 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
MySQL创建定时任务
2022/01/22 MySQL