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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
Vue.js动态组件解析
Sep 09 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
解析strtr函数的效率问题
2013/06/26 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP处理会话函数大总结
2015/08/05 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
在Python中执行系统命令的方法示例详解
2017/09/14 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python3 assert断言实现原理解析
2020/03/02 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
python如何变换环境
2020/07/21 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
Python基于template实现字符串替换
2020/11/27 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
道路交通安全实施方案
2014/03/12 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
消防演习感想
2015/08/10 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS