这个非本人所写，拿的网上的自己改了下 JS代码： View Code
function sAlert(str) {var msgw, msgh, bordercolor;msgw = 300;//提示窗口的宽度msgh = 200;//提示窗口的高度titleheight = 25 //提示窗口标题高度bordercolor = "#FF3C00";//提示窗口的边框颜色titlecolor = "#D2CECE";//提示窗口的标题颜色var sWidth, sHeight;sHeight = window.innerHeight;sWidth = window.innerWidth;var bgObj = document.createElement("div");//创建一个div对象bgObj.setAttribute('id', 'bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值bgObj.style.position = "absolute";//把bgDiv这个div绝对定位bgObj.style.top = "0";//顶部为0bgObj.style.background = "#EFEFF2";//背景颜色bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置bgObj.style.opacity = "0.6";//透明度(火狐浏览器中)bgObj.style.left = "0";//左边为0bgObj.style.width = sWidth + "px";//宽(上面得到的屏幕宽度)bgObj.style.height = sHeight + "px";//高(上面得到的屏幕高度)bgObj.style.zIndex = "100";//层的z轴位置 document.body.appendChild(bgObj);var msgObj = document.createElement("div")//创建一个div对象msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值msgObj.setAttribute("align", "center");//为div的align赋值//msgObj.style.background ="";//背景颜色为白色//msgObj.style.border = "1px solid " + bordercolor;//边框属性，颜色在上面已经赋值msgObj.style.position = "absolute";//绝对定位msgObj.style.left = "35%";//从左侧开始位置msgObj.style.top = "30%";//从上部开始位置msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性//msgObj.style.marginLeft = "-225px";//左外边距//msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)msgObj.style.height = msgh + "px";//提示框的高(上面定义过)msgObj.style.textAlign = "center";//文本位置属性，居中。msgObj.style.lineHeight = "25px";//行间距msgObj.style.zIndex = "101";//层的z轴位置// var title = document.createElement("h4");//创建一个h4对象// title.setAttribute("id", "msgTitle");//为h4对象填加标题// title.setAttribute("align", "right");//文字对齐方式// title.style.margin = "0";//浮动// title.style.padding = "3px";//浮动// title.style.background = titlecolor;//背景颜色// title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";// title.style.opacity = "0.75";//透明// //title.style.border="1px solid " + bordercolor;//边框// title.style.height = "25px";//高度// title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性// title.style.color = "white";//文字颜色// title.style.cursor = "pointer";//鼠标样式//// title.innerHTML = "<a href=\"#\">关闭</a>";//显示的文字// title.onclick = function () {//document.body.removeChild(bgObj);//移除遮罩层//document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题//document.body.removeChild(msgObj);//移除提示框// }document.body.appendChild(msgObj);//在body中画出提示框层//document.getElementById("msgDiv").appendChild(title);//在提示框中增加标题var txt = document.createElement("p");txt.style.margin = "1em 0";//文本浮动txt.setAttribute("id", "msgTxt");//为p属性增加id属性txt.innerHTML = str;//把传进来的值赋给p属性document.getElementById("msgDiv").appendChild(txt);//把p属性增加到提示框里}
实现1：
<a href="#" οnclick="sAlert('<img src=Images/loading.gif title=请稍候.... />');">点击测试</a>
效果图：
在UpdateProgress中的实现：
前台代码：
View Code
<html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false"><ProgressTemplate><div id="bgDiv" style="position: absolute; top: 0px; background: #EFEFF2; filter: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity: 0.6; left: 0px; width: 1280px; height: 1280px; z-index: 100;"><div id="msgDiv" style="text-align: center; vertical-align: central; position: absolute; left: 35%; top: 30%; width: 300px; height: 200px; line-height: 25px; z-index: 101"><p><img src='Images/loading.gif' title='请稍候....' /></p></div></div></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:GridView ID="GridView1" runat="server"></asp:GridView></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /></Triggers></asp:UpdatePanel><br /><asp:Button Text="猛击一下" runat="server" ID="Button1" OnClientClick="return Check();" OnClick="Button1_Click" /></div></form></body></html>
后台代码：
View Code
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace AjaxWebApplication1{public partial class UpdateProgress : System.Web.UI.Page{static List<Student> Items;protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){Items = new List<Student>();for (int i = 0; i < 20; i++){Items.Add(new Student { ID = "100" + i, Name = "Peter" + i });}}}protected void Button1_Click(object sender, EventArgs e){System.Threading.Thread.Sleep(2000);GridView1.DataSource = Items;GridView1.DataBind();}}public class Student{public string ID { get; set; }public string Name { get; set; }}}
