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}

关闭

logo.gif

 
关键字:所在地:
 例如:餐厅;电器;超市

打开遮罩

©2007 搜铺网     粤ICP备07006767号
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值