自定义数据提交稍候及自动提示成功的提示层

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_30399871

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量58

点赞数

文章标签： javascript ui xhtml ViewUI

原文链接：http://www.cnblogs.com/ruolinzhanyuan/archive/2008/09/19/1294154.html

版权

之前在网上看了许多自定义的提示层，没多少个做的符合心意，符合心意的但代码写的太复杂了，于是自己把Javascript代码写得简单些做了些修改，给需要这功能的朋友瞧瞧，用用！

不多说了，先看看效果图吧：

效果图1：

效果图2：

数据提交成功后自动隐藏覆盖的层！下面就是aspx页面的代码

Code

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>

</div>

<br />

<span class="fixie" id="spContent"><img src="succeed.jpg" />数据提交成功！</span>

</div>

<br />

<span class="fixie" id="Span1"><img src="ajax_loading.gif" />数据提交中，请稍候

..</span>

</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>");

}

其中System.Threading.Thread.Sleep(3000);的方法是让程序过三秒之后执行之后的方法。使数据提交的效果看起来更明显些；

程序源码：点击下载

转载于:https://www.cnblogs.com/ruolinzhanyuan/archive/2008/09/19/1294154.html

weixin_30399871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义数据提交稍候及自动提示成功的提示层

之前在网上看了许多自定义的提示层，没多少个做的符合心意，符合心意的但代码写的太复杂了，于是自己把Javascript代码写得简单些做了些修改，给需要这功能的朋友瞧瞧，用用！不多说了，先看看效果图吧：效果图1：效果图2：数据提交成功后自动隐藏覆盖的层！下面就是aspx页面的代码Code<htmlxmlns="http://www.w3.o...
复制链接

扫一扫