本文实例讲述了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. 【故障公告】10:30-10:45 左右 docker swarm 集群节点问题引发故障

    非常抱歉,今天 10:30-10:45 左右由于 docker swarm 集群节点出现问题,造成除博客之外的站点出现访问异常,由此给您带来很大的麻烦,请您谅解. 故障开始时出现有时访问正常有时访问出 ...

  2. Git-删除文件后找回-比较文件差异

    #前提:删除前,文件存在是的状态提交到了本地库#操作: git reset --hard 指针位置 删除操作已近提交到本地库:指针指向历史记录 linxianli@VM-QS- MINGW64 /c/ ...

  3. python3.6新特性

    print(f'{6:^30}') print('\n'.join([' '.join([f'{i}*{j}={i*j:2d}' for j in range(1,i+1)]) for i in ra ...

  4. java中异常处理finally和return的执行顺序

    根据个人亲自测试,得出如下结果: 1.try,catch中有没有return,finnally都会执行,而且是先执行try,catch后,最后执行finnally语句: 2.如果finnally中有r ...

  5. Appuim的安装步骤

    1.下载Appium Desktop并安装 下载地址:https://github.com/appium/appium-desktop/releases 我下载的版本为:appium-desktop- ...

  6. ansible 模块

    1. #vim /etc/ansible/yaml/back.yml - hosts: siyi tasks: - name: "yum rsync" yum: name=rsyn ...

  7. vue.js 列表追加项写法

    <ul id="app"> <template v-for="site in sites"> <li>{{ site.nam ...

  8. spring 方法验证参数

    1:实体使用 @Valid    使用 validation  类注解 2:String 使用 controller 添加 @Validated @NotBlank(message = "i ...

  9. 015模块——起别名

    1.import起别名:通过as关键字可以给模块起别名: 模块名一旦起别名,原模块名就不能再使用 2.起别名的作用:①可以简化模块名字 import mmmmmmmmmmm3 as my_m3 pri ...

  10. DS博客作业02--线性表

    1.本周学习总结 1.1思维导图 1.2.谈谈你对线性表的认识及学习体会 这阶段学习学的是线性表,学习线性表的两种存储顺序-----链表和顺序表,体会了两者存储结构之间的区别,通过对顺序表,单链表,双 ...