模仿层遮盖网页浏览区
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>层遮盖网页可视区</title>
<style type="text/css">
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:150px;z-index:1000; visibility:hidden;filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#666666,OffX=6, OffY=6,Positive=2);}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#B3B3B3; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff;cursor:move;}
</style>
<script type="text/javascript" language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object)
{
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove()
{
if(Obj!='')
{
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function MUp()
{
if(Obj!='')
{
document.all(Obj).releaseCapture();
Obj='';
}
}
</script>
</head>
<body style="width: 100%; height: 869px; filter: progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=#3C7FAF,endColorStr=#ffffff);
margin: 0 auto 0 auto;">
<form id="form1" runat="server">
<input id="Button1" type="button" value="预览效果" onclick="document.getElementById('mask').style.visibility='visible';document.getElementById('massage_box').style.visibility='visible';document.getElementById('DropDownList1').disabled='disabled';" />
<div id="massage_box" style="left: 410px; top: 302px">
<div class="massage" style="text-align: left;">
<div class="header" onmousedown="MDown(massage_box)">
<div style="display: inline; width: 150px; position: absolute; margin-left: 10px;">
提示信息</div>
<span onclick="document.getElementById('massage_box').style.visibility='hidden'; document.getElementById('mask').style.visibility='hidden';document.getElementById('DropDownList1').disabled='';"
style="float: right; display: inline; cursor: hand; margin-right: 5px;">×</span></div>
<ul style="margin-right: 25; text-align: left;">
<li>您尚未登陆，请登陆后在使用该功能; </li>
<li>若您不清楚您的用户登陆号码,请看参考下一条;</li>
<li>请与小区网客服或小区物业联系;</li>
</ul>
</div>
</div>
<div id="mask">
</div>
<%--<iframe id="mask1"></iframe>--%>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>我的显示级别很高，层遮不住我的。。。</asp:ListItem>
</asp:DropDownList>
</form>
</body>
</html>
浙公网安备 33010602011771号