之前在网上看了许多自定义的提示层,没多少个做的符合心意,符合心意的但代码写的太复杂了,于是自己把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>
<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文件的代码:
Code
using 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>");
}
}
}
using 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);的方法是让程序过三秒之后执行之后的方法。使数据提交的效果看起来更明显些;