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;
width: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;
width: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; width: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>
本人博客的文章大部分来自网络转载,因为时间的关系,没有写明转载出处和作者。所以在些郑重的说明:文章只限交流,版权归作者。谢谢
浙公网安备 33010602011771号