zoukankan
html css js c++ java
通过JS弹出一个等待对话框
在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=\
"
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; 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();");
利用JS动态动态构造对话框的好处是容易调用,不改变和影响原有的页面代码。
JS下载
查看全文
相关阅读:
常见的JedisConnectionException 异常
使用jstack分析解决进程死锁问题
微信支付(java版本)_统一下单
使用Quartz任务调用的时候报错Based on configured schedule, the given trigger will never fire.
什么是localStorage、sessionStorage,与cookie的区别?
JavaScript for循环、数组高级语法
SpringBoot集成Swagger2
SpringMVC全局异常处理,看这一篇就够了
SpringMVC文件上传的三种方法
HDU 2089 不要62 数位dp
原文地址:https://www.cnblogs.com/qiba78/p/1229258.html
最新文章
AtCoder Beginner Contest 071
Codeforces Round #429 (Div. 2)
CodeForces 61E Enemy is weak
删数问题(贪心)
poj 3281 最大流
poj2516 最小费用最大流
poj 1149 PIGS 最大流
poj 1459 最大流
poj 3422
hdu 2686 最小费用最大流
热门文章
图--二分匹配模板
字符串_字典树(模板 hdu 1251)
最短路 dijkstra模板
最短路 kruskal模板
Redis使用详细教程
如何优化Mysql执行查询数据的速度
利用Jmeter 实现Json格式接口测试
Linux常用操作命令
微信支付(java版本)_支付结果通知
tomcat调优方案Maximum number of threads (200) created for connector with address null and port 8091
Copyright © 2011-2022 走看看