css模糊遮罩效果_JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

这篇文章主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下

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

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

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;

}

window.οnlοad=function()

{

var zhezhao=document.getElementById("zhezhao");

var login=document.getElementById("login");

var bt=document.getElementById("bt");

var btclose=document.getElementById("btclose");

bt.οnclick=function()

{

zhezhao.style.display="block";

login.style.display="block";

}

btclose.οnclick=function()

{

zhezhao.style.display="none";

login.style.display="none";

}

}

点击关闭

脚本之家欢迎您，点击弹出遮罩

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。下面介绍一下如何实现次效果:

实现原理:

创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

建议:尽可能的手写代码，可以有效的提高学习效率和深度。

希望本文所述对大家的web程序设计有所帮助。