模仿层遮盖网页浏览区

<!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.οnmοuseup=MUp
    document.οnmοusemοve=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="预览效果" οnclick="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" οnmοusedοwn="MDown(massage_box)">
                    <div style="display: inline; width: 150px; position: absolute; margin-left: 10px;">
                        提示信息</div>
                    <span οnclick="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>

转载于:https://www.cnblogs.com/kzhanglin/archive/2007/11/02/946926.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值