异步调用JavaScript函数以显示覆盖图 [英] Call javascript function asynchronously to display overlay
问题描述
我有以下html布局
< div 类 =' cm-body' >
< div =' >
< div =' >
< div =' > span > somedata < /span > < /div >
< div =' > span > somedata < /span > < /div >
< div =' > span > somedata < /span > < /div >
< div =' > span > somedata < /span > < /div >
< /div >
< /div >
< div ='
< div ='
< div =' < img src path- to-preloader' class =' cm-overlay-preloader-image' > < /div >
< div =' < span class cm- overlay-preloader-text' > 请稍候正在加载数据.... < /span > < /div >
< /div >
< /div >
< /div >
.厘米覆盖 {
显示 : 没有；
位置 : 已修复；
宽度 : 0px;
高度 : 0px;
}
. cm-overlay-hide {
显示 : 没有；
}
. cm-overlay-show {
显示 : 阻止；
位置 : 已修复；
顶部 : 0px;
左 : 0px;
底部 : 0px;
右 : 0px;
不透明度 : 0.8;
背景色 : #c5c5c5;
z-index : 100;
宽度 : 100％；
高度 : 100％；
}
. cm-overlay-content-wrapper {
背景色 : #ffffff;
显示 : 阻止；
位置 : 相对；
最小宽度 : 300px;
最小高度 : 300px;
保证金 : 0自动；
宽度 : 50％;
高度 : 50％;
顶部 : 10％;
不透明度 : 1;
}
. cm-overlay-image {
显示 : 阻止；
位置 : 相对；
保证金 : 0自动；
高度 : 65％;
}
. cm-overlay-preloader-image {
显示 : 阻止；
位置 : 相对；
宽度 : 125像素；
顶部 : 50px;
保证金 : 0自动；
边框 : 0px;
}
. cm-overlay-text {
显示 : 阻止；
位置 : 相对；
高度 : 35％;
}
. cm-overlay-preloader-text {
显示 : 阻止；
位置 : 相对；
文本对齐 : 中心；
字体家族 : Oswald;
字体大小 : 30px;
}
我称此功能为隐藏或显示点击时的叠加层.但是由于它根本没有显示出来.我认为这是因为它在同一线程上被调用.
功能 toogle_overlay(isShown)
{
尝试
{
var overlay = $(文档).find(' .cm-overlay')；
如果(isShown！= 未定义&& overlay！= 未定义)
{
如果(isShown === 真){
$(overlay).addClass(' cm-overlay-show').removeClass(' cm-overlay-hide')；
}
其他
{
$(overlay).addClass(' cm-overlay-hide').removeClass(' cm-overlay-show')；
}
}
}
捕获(错误)
{
}
}
当我单击一个按钮时，我想显示覆盖图，直到Web服务请求成功为止.成功后，移除覆盖层.
我该如何实现?
请指教.
我尝试过的事情:
我已经尝试过XMLHTTPRequest异步调用js函数. ="code-string">' .cm-overlay');
如果(isShown！= 未定义&& overlay！= 未定义)
{
如果(isShown === 真){
(覆盖).addClass(' cm-overlay-show').removeClass( cm-overlay-hide')； } 其他 {
(overlay).addClass(' cm-overlay-hide').removeClass(' cm-overlay-show'); } } } 捕获(错误) { } }
当我单击一个按钮时，我想显示覆盖图，直到Web服务请求成功为止.成功后，移除覆盖层.
我该如何实现?
请指教.
我尝试过的事情:
我已经尝试过XMLHTTPRequest异步调用js函数
I have the following html layout
<div class='cm-body'>
<div class='cm-content'>
<div class='cm-item-list'>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
</div>
</div>
<div class='cm-overlay'>
<div class='cm-overlay-content-wrapper'>
<div class='cm-overlay-image'><img src='path-to-preloader' class='cm-overlay-preloader-image'></div>
<div class='cm-overlay-text'><span class='cm-overlay-preloader-text'>Please wait Loading data....</span></div>
</div>
</div>
</div>
.cm-overlay{
display:none;
position:fixed;
width:0px;
height:0px;
}
.cm-overlay-hide {
display:none;
}
.cm-overlay-show{
display: block;
position: fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
opacity:0.8;
background-color: #c5c5c5;
z-index: 100;
width: 100%;
height: 100%;
}
.cm-overlay-content-wrapper{
background-color: #ffffff;
display: block;
position: relative;
min-width: 300px;
min-height: 300px;
margin: 0 auto;
width: 50%;
height: 50%;
top: 10%;
opacity:1;
}
.cm-overlay-image{
display: block;
position: relative;
margin: 0 auto;
height: 65%;
}
.cm-overlay-preloader-image{
display: block;
position: relative;
width: 125px;
top: 50px;
margin: 0 auto;
border:0px;
}
.cm-overlay-text{
display: block;
position: relative;
height: 35%;
}
.cm-overlay-preloader-text{
display: block;
position: relative;
text-align: center;
font-family: Oswald;
font-size: 30px;
}
I call this function to either hide or show the overlay on click. But since it is not getting displayed at all. I think it is because it is getting called on the same thread.
function toogle_overlay(isShown)
{
try
{
var overlay = $(document).find('.cm-overlay');
if (isShown != undefined && overlay != undefined)
{
if (isShown === true) {
$(overlay).addClass('cm-overlay-show').removeClass('cm-overlay-hide');
}
else
{
$(overlay).addClass('cm-overlay-hide').removeClass('cm-overlay-show');
}
}
}
catch (err)
{
}
}
When i click on a button i want to show the overlay until the web service request succeeds. On success remove the overlay.
How do i achieve this?
Please advise.
What I have tried:
I have tried XMLHTTPRequest to call the js function asynchronously
(document).find('.cm-overlay'); if (isShown != undefined && overlay != undefined) { if (isShown === true) {
(overlay).addClass('cm-overlay-show').removeClass('cm-overlay-hide'); } else {
(overlay).addClass('cm-overlay-hide').removeClass('cm-overlay-show'); } } } catch (err) { } }
When i click on a button i want to show the overlay until the web service request succeeds. On success remove the overlay.
How do i achieve this?
Please advise.
What I have tried:
I have tried XMLHTTPRequest to call the js function asynchronously
这篇关于异步调用JavaScript函数以显示覆盖图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
