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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 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
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Sea.JS知识总结
2016/05/05 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
django实现用户登陆功能详解
2017/12/11 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
keras得到每层的系数方式
2020/06/15 Python
python热力图实现简单方法
2021/01/29 Python
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
人事科岗位职责范本
2014/03/02 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书