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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
JS求解两数之和算法详解
Apr 28 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript引用对象的方法
2007/01/11 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
从0开始的Python学习016异常
2019/04/08 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python sqlite的Row对象操作示例
2019/09/11 Python
pytorch之添加BN的实现
2020/01/06 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
部队万能检讨书
2014/02/20 职场文书
食品安全宣传标语
2014/06/07 职场文书
2015新学期家长寄语
2015/02/26 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
美术教师求职信范文
2015/03/20 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
党员理论学习心得体会
2016/01/21 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers
css弧边选项卡的项目实践
2023/05/07 HTML / CSS