自定义数据提交稍候及自动提示成功的提示层
自定义数据提交稍候及自动提示成功的提示层
之前在网上看了许多自定义的提示层，没多少个做的符合心意，符合心意的但代码写的太复杂了，于是自己把Javascript代码写得简单些做了些修改，给需要这功能的朋友瞧瞧，用用！
不多说了，先看看效果图吧：
效果图1：
效果图2：
数据提交成功后自动隐藏覆盖的层！下面就是aspx页面的代码
Code
<html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>无标题页</title> <script language="javascript">
var ShowDiv=new Object(); ShowDiv.ShowDiv=function() 
{ ShowDiv.setSize($("dvbuttom")); $("dvbuttom").style.display="block"; $('dvshow2').style.display="block"; $('btn').click();
} ShowDiv.HideDis=function() { $('dvbuttom').style.display="none"; $('dvshow').style.display="none"; } function $(id) { return document.getElementById(id); } ShowDiv.ShowResult=function() { ShowDiv.setSize($("dvbuttom")); $("dvbuttom").style.display="block"; $('dvshow2').style.display="none"; $('dvshow').style.display="block"; setTimeout(ShowDiv.HideDis,2000); } ShowDiv.setSize=function(div) { var sw=parseFloat(document.documentElement.scrollWidth); var cw=parseFloat(document.documentElement.clientWidth); var sh=parseFloat(document.documentElement.scrollHeight); var ch=parseFloat(document.documentElement.clientHeight); var relwidth= sw>=cw?sw:cw; var relheight = sh>=ch?sh:ch; div.style.width = relwidth + "px"; div.style.height = relheight + "px"; } window.onload=function() { addEvent(window,"resize",function(){ShowDiv.setSize($('dvbuttom'))}); addEvent(window,"scroll",function(){ShowDiv.setSize($('dvbuttom'))}); } function addEvent(obj, type, fn) { if (obj.addEventListener){ obj.addEventListener(type, fn, false); } else if (obj.attachEvent){ obj['e'+ type + fn] = fn; obj.detachEvent('on'+ type, obj['e'+ type + fn]); obj.attachEvent('on'+ type, obj['e'+ type + fn]); } }
</script><style> #dvshow {}{ BORDER-RIGHT: #ECF9FF 10px solid; BORDER-TOP: #ECF9FF 10px solid; FLOAT: left; MARGIN: 3px; BORDER-LEFT: #ECF9FF 10px solid; WIDTH: 500px; BORDER-BOTTOM: #ECF9FF 10px solid; height:200px; position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; z-index:1001; cursor:pointer; text-align:center; vertical-align:middle; display:none; background-color:White; } #dvshow2 {}{ BORDER-RIGHT: #ECF9FF 10px solid; BORDER-TOP: #ECF9FF 10px solid; FLOAT: left; MARGIN: 3px; BORDER-LEFT: #ECF9FF 10px solid; WIDTH: 500px; BORDER-BOTTOM: #ECF9FF 10px solid; height:200px; position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; z-index:1001; cursor:pointer; text-align:center; vertical-align:middle; display:none;background-color:White; } .dvbuttom{}{ filter:alpha(opacity=40);position:absolute;top:0px;left:0px; background-color:#86DB72; z-index:1000; display:none; } #frm {}{ filter:alpha(opacity=0);position:absolute;left:0px; top:0px; border-style:none;width:100%;height:100%; z-index:999; } .btn {}{ display: inline; height: 25px; margin: 5px 10px; width: 80px; } </style> </head><body> <form id="form1" runat="server"> <div style="z-index:1;"> <input type="button" value="测试" onclick="ShowDiv.ShowDiv()" class="btn" /> <div style="display:none"><asp:Button ID="btn" runat="server" Text="调用" onclick="btn_Click" /></div> </div> <div id="dvshow"> <br /> <br /><br /> <span class="fixie" id="spContent"><img src="succeed.jpg" />数据提交成功！</span> </div> <div id="dvshow2"> <br /> <br /><br /> <span class="fixie" id="Span1"><img src="ajax_loading.gif" />数据提交中，请稍候..</span> </div> <div id="dvbuttom" class="dvbuttom" ><iframe id="frm"></iframe></div> </form></body></html>
为了达到自动切换图片和提示语的效果，在后台cs文件做了处理，这个处理主要是调用前台页面的javascript的函数ShowDiv.ShowResult，实现了C#调用javascript；下面就是后台cs文件的代码：
Codeusing System;using System.Collections;using System.Configuration;using System.Data;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;namespace Web{ public partial class ShowAuto : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btn_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(3000); Page.RegisterStartupScript("onclick", "<script>ShowDiv.ShowResult();</script>"); } }}
其中System.Threading.Thread.Sleep(3000);的方法是让程序过三秒之后执行之后的方法。使数据提交的效果看起来更明显些；
