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下载
查看全文
相关阅读:
Integer类的parseInt和valueOf的区别
华为实习小结
程序员浪费生命的几种方式
移动前端中viewport(视口) 转
Console API 与命令行
Ajax
浏览器缓存机制
mysql之各种命令总结
jquery file upload 文件上传插件
文件上传插件uploadify详解
原文地址:https://www.cnblogs.com/qiba78/p/1229258.html
最新文章
案例:用ajax get方法 查询用户列表
ajax 用 get方法 验证登录
js变量声明提升
数据库收集的好的练习:
mysql 简单查询
mysql 复杂查询
mysql 列约束
mysql中的列类型
常用的SQL命令:
mysql创建数据库
热门文章
使用Eclipse创建Maven javaweb项目
SpringMVC多个拦截器
Java String.split()用法小结
后台传Map到ftl
Java获取当前时间
Mybatis避免出现语法错
前端弹出框
前端下拉框学习1
白夜行读后感
String的字符串相加是怎么实现的?
Copyright © 2011-2022 走看看