通过JS弹出一个等待对话框-阿里云开发者社区

通过JS弹出一个等待对话框

2017-11-26 1173

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

在BS系统中，有时候一个业务操作需要花很多的时间处理，如果没有任何提示的话，用户还以为是没有点到会继续点击，造成二次点击，或者产生不耐烦的心里。所有最好加个滚动的提示，罩在页面上，一来控制用户再次点击，而来让用户感觉到计算机正在运行操作：如下图

其实这个东东只要写很少的代码就能实现，JS代码如下：

function $()

{

var elements = new Array();

for (var i = 0; i < arguments.length; i++)

{

var element = arguments[i];

if (typeof element == 'string')

element = document.getElementById(element);

if (arguments.length == 1)

return element;

elements.push(element);

}

return elements;

}

function Show(message) {

HideElement();

var eSrc=(document.all)?window.event.srcElement:arguments[1];

var shield = document.createElement("DIV");//产生一个背景遮罩层

shield.id = "shield";

shield.style.position = "absolute";

shield.style.left = "0px";

shield.style.top = "0px";

shield.style.width = "100%";

shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";

//shield.style.height =document.body.scrollHeight;

shield.style.background = "#333";

shield.style.textAlign = "center";

shield.style.zIndex = "10000";

shield.style.filter = "alpha(opacity=0)";

shield.style.opacity = 0;

var alertFram = document.createElement("DIV");//产生一个提示框

var height="50px";

alertFram.id="alertFram";

alertFram.style.position = "absolute";

alertFram.style.width = "200px";

alertFram.style.height = height;

alertFram.style.left = "35%";

alertFram.style.top = "30%";

// alertFram.style.marginLeft = "-225px" ;

// alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";

alertFram.style.background = "#fff";

alertFram.style.textAlign = "center";

alertFram.style.lineHeight = height;

alertFram.style.zIndex = "10001";

strHtml =" <div style=\"width:100%; border:#58a3cb solid 1px; text-align:center;padding-top:10px \">";

strHtml+=" <img src=\"load1.gif\"><br>";

if (typeof(message)=="undefined"){

strHtml+=" 正在服务器上执行, 请稍候

}

else{

strHtml+=message;

}

strHtml+=" </div>";

strHtml+="<iframe src=\"\" style=\"position:absolute; visibility:inherit;top:0px; left:0px; width:300px; height:100px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>";//加个iframe防止被drowdownlist等控件挡住

alertFram.innerHTML=strHtml;

document.body.appendChild(alertFram);

document.body.appendChild(shield);

this.setOpacity = function(obj,opacity){

if(opacity>=1)opacity=opacity/100;

try{ obj.style.opacity=opacity; }catch(e){}

try{

if(obj.filters.length>0&&obj.filters("alpha")){

obj.filters("alpha").opacity=opacity*100;

}else{

obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";

}

catch(e){}

}

var c = 0;

this.doAlpha = function(){

if (++c > 20){clearInterval(ad);return 0;}

setOpacity(shield,c);

}

var ad = setInterval("doAlpha()",1);//渐变效果

eSrc.blur();

document.body.onselectstart = function(){return false;}

document.body.oncontextmenu = function(){return false;}

}

//隐藏页面上一些特殊的控件

function HideElement() {

var HideElementTemp = new Array('IMG','SELECT','OBJECT','IFRAME');

for(var j=0;j<HideElementTemp.length;j++){

try{

var strElementTagName=HideElementTemp[j];

for(i=0;i<document.all.tags(strElementTagName).length; i++){

var objTemp = document.all.tags(strElementTagName)[i];

if(!objTemp||!objTemp.offsetParent)

continue;

//objTemp.style.visibility="hidden";

objTemp.disabled="disabled"

}

catch(e){}

}

function Close() {

var shield= $("shield");

var alertFram= $("alertFram");

if(shield!=null) {

document.body.removeChild(shield);

}

if(alertFram!=null) {

document.body.removeChild(alertFram);

}

document.body.onselectstart = function(){return true};

document.body.oncontextmenu = function(){return true};

}

在asp.net页面上直接把此JS文件包括进来，调用Show方法就行，如 this.Button1.Attributes.Add("onClick","Show();");

本文转自94cool博客园博客，原文链接：http://www.cnblogs.com/94cool/archive/2009/09/07/1561850.html，如需转载请自行联系原作者

通过JS弹出一个等待对话框

热门文章

最新文章

相关课程

相关电子书

相关实验场景