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

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

复制代码 代码如下:
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="//www.jb51.net/" /> 
<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程序设计有所帮助。

转载自：https://m.jb51.net/article/58740.htm

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法的更多相关文章

  1. 页面弹出全屏浮层或遮罩时，禁止底层body滚动

    · 解决方法 针对弹出的浮层的 touchmove事件,添加阻止浏览器默认行为. $('.mask-wrapper').on('touchmove', function (event) { // 监听 ...

  2. jquery3和layui冲突导，致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

    项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: <!DOC ...

  3. layer设置弹出全屏

    //弹出即全屏 var index = layer.open({ type: , content: 'http://www.layui.com', area: ['300px', '195px'], ...

  4. DIV JS CSS 轻量级弹出层 兼容各浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  6. FullPage.js全屏插件文档及使用方法

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...

  7. FullPage.js全屏滚动插件的配置项、方法和回调函数

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  8. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  9. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

随机推荐

  1. 关于Knowledge Transfer的一点想法

    维基百科中对于Knowledge Transfer(知识转移)的定义是: 知识转移是指分享或传播知识并为解决问题提供投入.在组织理论中,知识转移是将知识从组织的一个部分转移到另一个部分的实践问题. 与 ...

  2. Tomcat调试404错误

    开篇附上我找到的部分解决方法摘自:https://blog.csdn.net/psp0001060/article/details/51879232 如不想跳转查看,链接内容如下: 问题一:      ...

  3. redis编译 报告错误 jemalloc/jemalloc.h：没有那个文件或目录 解决.

    问题原因:没找到jemalloc头文件. 百度谷歌半天没找到有效的下载地址. github中有 到github下载.jemalloc https://github.com/jemalloc/jemal ...

  4. Linux ISCSI服务配置

    Linux ISCSI服务配置,客户端进行访问 环境配置: server端 172.25.0.11 client端 172.25.0.10 配置ISCSI服务端 1.安装软件包 yum install ...

  5. Web后台快速开发框架

    Web后台快速开发框架 Coldairarrow 目录 目录 第1章    目录    1 第2章    简介    3 第3章    基础准备    4 3.1    开发环境要求    4 3.2 ...

  6. soamanager发布的Webservice服务，调用时出现http500报错

    最近再给薪酬那边发布ws服务时出现了报错,调用方反馈了errorCode:BEA-380002.在使用XMLspy工具去调用这个WSDL时候,则反馈http500的错误消息.如下图: 遇到这种问题我通 ...

  7. 浅谈css3有意思的属性pointer-events: none；

    pointer-events: none: 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着.   而display:none; 是你摸不着,但是你也看不见. ...

  8. 普通PC通过USB转485串口 ModBus-RTU通信协议控制伺服电机

    一.RS485通信 RS485 是半双工通信(2 线制),可以一点对多点进行组网,而且 RS485 是用缆线两端的电压差值来表示传递信号,这与 RS232 电气特性大不一样.RS485 仅仅规定了接收 ...

  9. PHP变量传值赋值和引用赋值，变量销毁

    <?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...

  10. 修改注册表信息来兼容当前WebBrower程序

    public class WebBrower { /// <summary> /// 修改注册表信息来兼容当前程序 /// /// </summary> public stat ...