原生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中动态效果小结
Dec 16 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
jquery append与appendTo方法比较
May 24 jQuery
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue模块移动组件的实现示例
May 20 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 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
桌面中心(三)修改数据库
2006/10/09 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
2014年学校工会工作总结
2014/12/06 职场文书
《包身工》教学反思
2016/02/23 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
frg-100简单操作(设置)说明
2022/04/05 无线电