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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue中的inject学习教程
Apr 24 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
详解Vue的mixin策略
Nov 19 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
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php实现的mongodb操作类
2015/05/28 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
use jscript with List Proxy Server Information
2007/06/11 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
Vue 组件注册实例详解
2019/02/23 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python3中确保枚举值代码分析
2020/12/02 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
高中课前三分钟演讲稿
2014/08/18 职场文书
贪污检举信范文
2015/03/02 职场文书
教师节主持词开场白
2015/05/29 职场文书
汶川大地震感悟
2015/08/10 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python