JavaScript编写页面半透明遮罩效果的简单示例


Posted in Javascript onMay 09, 2016

半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助

<div > 
<h4><span>现在注册</span><span >关闭</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 ></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>  

全屏幕遮盖

<!DOCTYPE html>
<style>
#mask {
 position:fixed;width:100%;
 top:0px;left:0px;
 _position:absolute;
 _top:expression(documentElement.scrollTop);
 background:rgba(0,0,0,0.5);
 background:transparent\9;
 filter:progid:DXImageTransform.Microsoft.Gradient(
 startColorStr=#80000000,endColorStr=#80000000
 );
 display:none;
}
#mask_td {text-align:center;}
</style>
<img
 src="http://web-tinker.com/images/TheMagicConch.jpg"
 width="100" id="img" 
/>
<table id="mask"><tr><td id="mask_td"></td></tr></table>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:isIE;
//声明变量
var img,mask;
//获取元素
img=document.getElementById("img");
mask=document.getElementById("mask");
mask.td=document.getElementById("mask_td");
//计算mask的大小
mask.setSize=function(){
 //获取文档可见区域宽度并设置到mask上
 var de=document.documentElement;
 mask.style.width=de.clientWidth+"px"
 mask.style.height=de.clientHeight+"px";
};
//添加show方法
mask.show=function(){
 //隐藏页面的滚动条
 document[
 isIE<9?"documentElement":"body"
 ].style.overflow="hidden";
 //计算mask的大小
 mask.setSize();
 //显示
 mask.style.display=isIE==6?"block":"table";
};
//添加hide方法
mask.hide=function(){
 //显示页面滚动条
 document[
 isIE<9?"documentElement":"body"
 ].style.overflow="";
 //清空里面的内容
 mask.td.innerHTML="";
 //隐藏
 mask.style.display="none";
};
//添加append方法
mask.append=function(e){
 //在mask的TD里面添加内容哦你
 mask.td.appendChild(e);
};
//点击mask关闭
mask.onclick=function(e){
 //判断事件来源,如果是空白区域被点击了就关闭mask
 e=e||event;
 (e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗体大小改变时也改变mask的大小
window.onresize=function(){
 mask.setSize();
};
//点击图片的事件
img.onclick=function(){
 //创建一个图片对象
 var o=new Image;
 //设置图片的地址
 o.src=img.src;
 //在mask内添加内容
 mask.append(o);
 //显示mask
 mask.show();
};
</script>
Javascript 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
You might like
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
Vue 父子组件、组件间通信
2017/03/08 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
通过C++学习Python
2015/01/20 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python删除字符串中指定字符的方法
2018/08/13 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
《钱学森》听课反思
2014/03/01 职场文书
授权委托书
2014/07/31 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
房屋质量投诉书
2015/07/02 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS