JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法


Posted in Javascript onDecember 20, 2014

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法。分享给大家供大家参考。具体分析如下:

在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下:

<!DOCTYPE html>    

<html>    

<head>    

<meta charset=" utf-8">    

<meta name="author" content="https://3water.com/" />  

<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-三水点靠木</title> 

<style type="text/css"> 

* 

{ 

 margin:0px; 

 padding:0px; 

} 

.zhezhao 

{ 

 width:100%; 

 height:100%; 

 background-color:#000; 

 filter:alpha(opacity=50); 

 -moz-opacity:0.5; 

 opacity:0.5; 

 position:absolute; 

 left:0px; 

 top:0px; 

 display:none; 

 z-index:1000; 

} 

.login 

{ 

 width:280px; 

 height:180px; 

 position:absolute; 

 top:200px; 

 left:50%; 

 background-color:#000; 

 margin-left:-140px; 

 display:none; 

 z-index:1500; 

} 

.content 

{ 

 margin-top:50px; 

 color:red; 

 line-height:200px; 

 height:200px; 

 text-align:center; 

} 

</style> 

<script type="text/javascript"> 

window.onload=function() 

{ 

 var zhezhao=document.getElementById("zhezhao"); 

 var login=document.getElementById("login"); 

 var bt=document.getElementById("bt"); 

 var btclose=document.getElementById("btclose"); 

  

 bt.onclick=function() 

 { 

  zhezhao.style.display="block"; 

  login.style.display="block"; 

 } 

 btclose.onclick=function() 

 { 

  zhezhao.style.display="none"; 

  login.style.display="none";  

 } 

} 

</script> 

</head> 

<body> 

  <div class="zhezhao" id="zhezhao"></div> 

  <div class="login" id="login"><button id="btclose">点击关闭</button></div>  

  <div class="content">三水点靠木欢迎您,<button id="bt">点击弹出遮罩</button></div> 

</body> 

</html>

以上实现了基本的遮罩功能,当点击弹出遮罩,会弹出一个对象,当点击关闭,遮罩效果消失。下面介绍一下如何实现次效果:

实现原理:

创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

建议:尽可能的手写代码,可以有效的提高学习效率和深度。

希望本文所述对大家的web程序设计有所帮助。

Javascript 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
Node.js+Express配置入门教程
May 19 Javascript
详解Angular2响应式表单
Jun 14 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 #Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 #Javascript
Node.js实现批量去除BOM文件头
Dec 20 #Javascript
javascript删除一个html元素节点的方法
Dec 20 #Javascript
Node.js中调用mysql存储过程示例
Dec 20 #Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 #Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 #Javascript
You might like
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue使用自定义icon图标的方法
2018/05/14 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
AngularJS上传文件的示例代码
2018/11/10 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
详解python3百度指数抓取实例
2016/12/12 Python
python 链接和操作 memcache方法
2017/03/04 Python
python实现感知器
2017/12/19 Python
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
函授大专自我鉴定
2013/11/01 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
大专生自我评价
2014/01/28 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
英语教师个人总结
2015/02/09 职场文书
毕业论文致谢词
2015/05/14 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android