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 相关文章推荐
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
mysql建立外键
2006/11/25 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
RequireJs的使用详解
2017/02/19 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
ES6新增的math,Number方法
2017/08/06 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
使用webpack构建应用的方法步骤
2019/03/04 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
React中使用UMEditor的方法示例
2019/12/27 Javascript
vue实现登录拦截
2020/06/29 Javascript
python批量下载图片的三种方法
2013/04/22 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python实现斗地主分牌洗牌
2020/06/22 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
《雷雨》教学反思
2014/02/20 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
大学生读书笔记范文
2015/07/01 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL