原生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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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 5.0 Pear安装方法
2006/12/06 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
php批量修改表结构实例
2017/05/24 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
javascript数组去掉重复
2011/05/12 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
python 等差数列末项计算方式
2020/05/03 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
师范生实习的个人自我鉴定
2013/10/20 职场文书
招商经理岗位职责
2013/11/16 职场文书
教师实习自我鉴定
2013/12/13 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python