原生js实现半透明遮罩层效果具体代码


Posted in Javascript onJune 06, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>弹出提示</title> 
<style> 
* { 
margin: 0; 
padding: 0; 
font-size: 12px; 
} 
html, body { 
height: 100%; 
width: 100%; 
} 
#content { 
background: #FFFFFF; 
padding: 30px; 
height: 100%; 
} 
#content a { 
font-size: 30px; 
color: #369; 
font-weight: 700; 
} 
#alert { z-index:2; 
border: 1px solid #369; 
width: 300px; 
height: 150px; 
background: #e2ecf5; 
z-index: 1000; 
position: absolute; 
display: none; 
} 
#alert h4 { 
height: 20px; 
background: #369; 
color: #fff; 
padding: 5px 0 0 5px; 
} 
#alert h4 span { 
float: left; 
} 
#alert h4 span#close { 
margin-left: 210px; 
font-weight: 500; 
cursor: pointer; 
} 
#alert p { 
padding: 12px 0 0 30px; 
} 
#alert p input { 
width: 120px; 
margin-left: 20px; 
} 
#alert p input.myinp { 
border: 1px solid #ccc; 
height: 16px; 
} 
#alert p input.sub { 
width: 60px; 
margin-left: 30px; 
} 
#mask{ position:absolute; top:0; left:0; height:100%; width:100%; background:#000; opacity:0.3; display:none; z-index:1;} 
</style> 
</head> 
<body> 
<div id="content"> <a href="#">注册</a> </div> 
<div id="alert"> 
<h4><span>现在注册</span><span id="close">关闭</span></h4> 
<p> 
<label> 用户名</label> 
<input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> 
</p> 
<p> 
<label> 密 码</label> 
<input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> 
</p> 
<p> 
<input type="submit" value="注册" class="sub" /> 
<input type="reset" value="重置" class="sub" /> 
</p> 
</div> 
<div id="mask"></div><!-- 遮罩层div--> 
<script type="text/javascript"> 
var myAlert = document.getElementById("alert"); 
var myMask=document.getElementById('mask'); 
var reg = document.getElementById("content").getElementsByTagName("a")[0]; 
var mClose = document.getElementById("close"); 
reg.onclick = function() 
{ 
myMask.style.display="block"; 
myAlert.style.display = "block"; 
myAlert.style.position = "absolute"; 
myAlert.style.top = "50%"; 
myAlert.style.left = "50%"; 
myAlert.style.marginTop = "-75px"; 
myAlert.style.marginLeft = "-150px"; 
document.body.style.overflow = "hidden"; 
} 
mClose.onclick = function() 
{ 
myAlert.style.display = "none"; 
myMask.style.display = "none"; 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript 当前日期转化为中文的实现代码
May 13 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
Vuex简单入门
Apr 19 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 #Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 #Javascript
JavaScript的漂亮的代码片段
Jun 05 #Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 #Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 #Javascript
jquery 面包屑导航 具体实现
Jun 05 #Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
PHP的加密方式及原理
2012/06/14 PHP
简单实现php上传文件功能
2017/09/21 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
安装PyInstaller失败问题解决
2019/12/14 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
请介绍一下Ant
2016/07/22 面试题
个人近期表现材料
2014/02/11 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
学校募捐倡议书
2014/05/14 职场文书
入党综合考察材料
2014/06/02 职场文书
工厂标语大全
2014/10/06 职场文书
2014年采购员工作总结
2014/11/18 职场文书
科技活动总结范文
2015/05/11 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
正确使用MySQL update语句
2021/05/26 MySQL
python如何利用traceback获取详细的异常信息
2021/06/05 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA