本文实例讲述了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. 使用jquery模拟请求，测试项目是否存在跨域限制

    1.Get 请求 <html> <head><script src="https://cdn.staticfile.org/jquery/1.10.2/jque ...

  2. host头注入

    看到有说这个题为出题而出题,其实我还是这么觉得, host出问题的话我觉得一般只有在审计代码,看到才知道有host注入 假设不提示host注入,就有难度了 常规的注入了

  3. C# 图片文件与字符串之间的转换

    1.将图片文件转化为字符串类型 2.将字符串类型的图片数据转换为本地图片保存

  4. linux下安装多个Tomcat

    编辑环境变量:vi /etc/profile 加入以下代码 ##########first tomcat########### CATALINA_BASE=/usr/local/src/tomcat ...

  5. 在自己写的C#类中调用 ASP.NET的Request,server 等对象

    加命名空间(可能需要在项目中先加引用,再在类中如下引用) using System.Web.SessionState; HttpContext.Current.Session["TotalP ...

  6. Ubuntu安装Navicat 12 for MySQL

    环境准备 要想运行Navicat,必须先安装Wine,这个可以使用下面的命令来安装Wine: ubuntu@ubuntu ~ $ sudo apt-get install wine-stable 安装 ...

  7. codeforces476D

    Dreamoon and Sets CodeForces - 476D Dreamoon likes to play with sets, integers and .  is defined as ...

  8. git只追踪特定类型的文件

    比如我只关心所有office文档并排除掉~开头的辅助文件: * !*/ !*.docx !*.doc !*.xlsx ~*

  9. git常用命令介绍

    一,仓库 1. git init    把当前目录变成git可管理得仓库,也就是初始化仓库 2. git add 文件名            在仓库中添加新文件 3. git commit -m & ...

  10. [HNOI2010]城市建设

    [HNOI2010]城市建设 玄学cdq O(nlog^2n)的动态最小生成树 其实就是按照时间cdq分治+剪枝(剪掉一定出现和不可能出现的边) 处理[l,r]之间的修改以及修改之后的询问,不能确定是 ...