js+CSS锁屏弹框

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<head runat="server">
<title>锁屏2</title>
<style type="text/css">
#massage_box{  
    position:absolute;  
    350px;  
    height:200px;
    background:#fff; color:#036; font-size:12px; line-height:150%;
    z-index:2; visibility:hidden;
}  
#mask{  
    position:absolute;  
    top:0; left:0;  
    expression(document.documentElement.scrollWidth);  
    height:expression(document.documentElement.scrollHeight);
    background:#666;  
    filter:alpha(opacity=60);  
    z-index:1;  
    visibility:hidden;
}  


</style>
<script language="javascript" type="text/javascript">
function d_x(){
    mask.style.visibility='visible';
    massage_box.style.visibility='visible';
    var screenWidth = document.documentElement.clientWidth+document.documentElement.scrollLeft;
var screenHeight = document.documentElement.clientHeight;
var divObj = document.getElementById("massage_box");
var divWidth = divObj.offsetWidth;
var divHeight = divObj.offsetHeight;
var left = parseInt((screenWidth - divWidth)/2);
var top = parseInt((screenHeight - divHeight)/2);
divObj.style.left = left+document.documentElement.scrollLeft;
divObj.style.top = top;
}
function d_y(){
    massage_box.style.visibility='hidden';  
    mask.style.visibility='hidden'
}

</script>
</head>
<body>
<form id="form1" runat="server">
<!-- 虚Div 用作锁屏 -->
<div id="mask"> 虚Div 最好不填写东东 例
    <asp:Button ID="Button1" runat="server" Text="Button" /></div>

<!-- start 将要弹出的Div 用作操作 -->
<div id="massage_box">  
   
        
            <div style="display:inline; 150px; position:absolute">本站提示信息 </div>  
<span onClick="javascript:d_y();" style="float:right; display:inline; cursor:hand">× </span>
<!--end 虚Div 用作锁屏 -->
   

</div>  
asdf
<!-- 锁屏时不可操作的Div -->
<div>
<span onClick="javascript:d_x();" style="cursor:hand"><a href="#">显示提示信息 </a> </span>  
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>sDVSVSDvSDFVsdfsavsVScvsdVvSFvsVvdV <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>  
bottom here
<span onClick="javascript:d_x();" style="cursor:hand"><a href="#">显示提示信息 </a> </span>   
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>sDVSVSDvSDFVsdfsavsVScvsdVvSFvsVvdV <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>  
bottom here   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> adadadadad
<br> <br> <br> <br> <br> <br> <br> <br> <br>sDVSVSDvSDFVsdfsavsVScvsdVvSFvsVvdV <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<span onClick="javascript:d_x();" style="cursor:hand"><a href="#">显示提示信息 </a> </span>   
bottom here   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>sDVSVSDvSDFVsdfsavsVScvsdVvSFvsVvdV <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<span onClick="javascript:d_x();" style="cursor:hand"><a href="#">显示提示信息 </a> </span>   
bottom here     ad
</div>
</form>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wzg0319/p/2324313.html