很好的Web前端灰框技术
针对于ASP.NET技术
前台页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MakePaper.aspx.cs" Inherits="Web_Manage_DataImport_MakePaper" %>
<!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 id="Head1" runat="server">
<title></title>
<link href="../images/skin.css" rel="stylesheet" type="text/css" />
<%-- <link href="http://www.cnblogs.com/../CSS/main.css" type="text/css" rel="stylesheet" />--%>
<style type="text/css">
.style1
{
text-align: center;
}
.style2
{
font-size: x-large;
}
.style3
{
font-size: 12px;
line-height: 26px;
font-weight: bold;
color: #000000;
background-image: url('../images/top_bt.jpg');
background-repeat: no-repeat;
display: block;
text-indent: 15px;
padding-top: 5px;
text-align: left;
}
</style>
//关键脚本
<script type="text/javascript" >
//javascript控制两层显示与否
function ShowNo() {
document.getElementById("doing").style.display = "none";
document.getElementById("divLogin").style.display = "none";
}
function $(id) {
return (document.getElementById) ? document.getElementById(id) : document.all[id];
}
function showFloat() {
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
$('doing').style.display = "block";
document.getElementById("divLogin").style.display = "";
}
function getRange() {
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top == 0 && left == 0 && height == 0 && width == 0) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return { top: top, left: left, height: height, width };
}
function dialwinprocess() {
showFloat();
document.getElementById("<%= this.imgBtnConfirm.ClientID %>").click();
//ShowNo();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server" AsyncPostBackTimeout="1800"
ScriptMode="Release">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<input id="Button1" type="button" style="background-image: url('http://www.cnblogs.com/../Images/makesure.jpg');
86px; height: 34px;" onclick="dialwinprocess()" />
<asp:ImageButton ID="imgBtnConfirm" runat="server" ImageUrlI="~/mages/makesure.jpg"
OnClick="imgBtnConfirm_Click" Style="display: none" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgBtnConfirm" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:ImageButton ID="ImageButtonReset" runat="server" ImageUrl="~/Images/makereset.jpg"
OnClick="ImageButtonReset_Click" CausesValidation="False" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="False">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="../images/jindutiao.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<!--加一个半透明层-->
<div id="doing" style="filter: alpha(opacity=10); -moz-opacity: 0.9; opacity: 0.9;
background-color: #000; 100%; height: 100%; z-index: 1000; position: absolute;
left: 0; top: 0; display: none; overflow: hidden;">
</div>
<!--加一个登录层-->
<div id="divLogin" style="border: solid 0px #898989; background: #fff; padding: 0px;
600px; height:400px; z-index: 1001; position: absolute; display: none; top:50%; left: 30%;
margin-right: 0; margin-top: 0px; text-align:center; vertical-align:middle;">
<!--关键位置-->
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
DynamicLayout="False">
<ProgressTemplate>
<asp:Image ID="Image110" runat="server" ImageUrl="../images/loading-ring.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<%-- <input type="button" value=" 取消" onclick="ShowNo()" />
--%>
<br />
<br />
<br />
</div>
</form>
</body>
</html>
后台页面关键代码：（就是如何解除时间完毕后的灰框）
try
{}
catch
{
}
finally //关键代码
{
//最后取消灰框
ScriptManager.RegisterClientScriptBlock(imgBtnConfirm, typeof(ImageButton), "commit", "ShowNo();", true);
}