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