css+js+html遮罩层实例,使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

实例,使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享"/>

css+js+html遮罩层实例,使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

CSS+JavaScript实现原理:

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

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";

}

}

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

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。

纯JavaScript：实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。

难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。

实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉 。

代码：

function Open()

{

//隐藏select控件

DispalySelect(0);

//显示遮罩层

document.getElementById("divPageMask").style.display="block";

//处理遮罩层

resizeMask();

window.onResize = resizeMask;

//显示弹出窗口

document.getElementById("divOpenWin").style.display="block";

}

function Close()

{

//显示select控件

DispalySelect(1);

//处理遮罩层

divPageMask.style.width = "0px";

divPageMask.style.height = "0px";

divOpenWin.style.display = "none";

window.onResize = null;

document.getElementById("divOpenWin").style.display="none";

}

//页面遮罩

function resizeMask()

{

divPageMask.style.width = document.body.scrollWidth;

divPageMask.style.height = document.body.scrollHeight;

divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);

divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2);

}

function DispalySelect(val)

{ //显示和隐藏select控件

var dispalyType;

var arrdispalyType=["hidden","visible"];

var arrObjSelect=document.getElementsByTagName("select");

for (i=0;i

{

arrObjSelect[i].style.visibility=arrdispalyType[val];

}

}

.body,td{font-size:12px}

#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}

#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px}

关闭

关键字： 所在地：   例如：餐厅；电器；超市

打开遮罩

免费提交店铺 |  店铺推广 |  关于搜铺 |  业务合作  |  设为首页 |  加入收藏

©2007 搜铺网     粤ICP备07006767号