原生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打印网页部分内容的脚本
Nov 17 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
Express.JS使用详解
Jul 17 Javascript
js中document.write的那点事
Dec 12 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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编码规范之注释和文件结构说明
2010/07/09 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP代码优化技巧小结
2015/09/29 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
基于python实现聊天室程序
2018/07/27 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python中dict和set的用法讲解
2019/03/28 Python
python爬虫增加访问量的方法
2019/08/22 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
招股说明书范本
2014/05/06 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
python脚本框架webpy模板赋值实现
2021/11/20 Python
Sql Server之数据类型详解
2022/02/28 SQL Server