Javascript - 加载/忙碌指示符或事件点击页面上的透明div [英] Javascript - loading/busy indicator or transparent div over page on event click

问题描述

我有一个客户端JavaScript函数，它是在按钮点击触发（基本上，它的计算器！）。有时，由于页面上的巨大数据，javascript计算器功能需要长，使该页面对用户显示为不活动。我计划在整个页面上显示一个透明的div，也许使用一个繁忙的指示符（在中心），直到计算器功能结束，以便用户等待，直到进程结束。

 
 function CalculateAmountOnClick（）
 {
 //显示透明div 
 
 MY耗时的循环！ 
 {
 
} 
 
 //删除透明div 
 
} 
 

有关如何解决这个问题的任何想法？当我的计算器函数启动时，是否应该使用javascript将css类分配给一个div（包围我的整个页面的内容）？我试过，但没有得到所需的结果。

TIA

  function CalculateAmountOnClick（） {
 var curtain = document.body.appendChild（document.createElement（'div'））; 
 curtain.id =curtain; 
 curtain.onkeypress = curtain.onclick = function（）{return false; } 
 try {
 //你的操作
} 
 finally {
 curtain.parentNode.removeChild（curtain）; 
} 
} 
  

您的CSS：

  #curtain {
 position：fixed; 
 _position：absolute; 
 z-index：99; 
 left：0; 
 top：0; 
 width：100％; 
 height：100％; 
 _height：expression（document.body.offsetHeight +px）; 
 background：url（curtain.png）; 
 _background：url（curtain.gif）; 
} 
  

（根据需要将MSIE 6下划线黑客移动到有条件包含的文件） p>

您可以将其设置为窗帘的添加/删除功能，或作为包装器：

  function modalProcess（callback）{
 var ret; 
 var curtain = document.body.appendChild（document.createElement（'div'））; 
 curtain.id =curtain; 
 curtain.onkeypress = curtain.onclick = function（）{return false; } 
 try {
 ret = callback（）; 
} 
 finally {
 curtain.parentNode.removeChild（curtain）; 
} 
 return ret; 
} 
  

那么你可以这样调用：

  var result = modalProcess（function（）{
 //你的操作在这里
}）; 
  

i got a client side javascript function which is triggered on a button click (basically, its a calculator!!). Sometimes, due to enormous data on the page, the javascript calculator function take to long & makes the page appear inactive to the user. I was planning to display a transparent div over entire page, maybe with a busy indicator (in the center) till the calculator function ends, so that user waits till process ends.

function CalculateAmountOnClick()
{
  // Display transparent div

  // MY time consuming loop!
    {

    }

  // Remove transparent div 

}

Any ideas on how to go about this? Should i assign a css class to a div (which surrounds my entire page's content) using javascript when my calculator function starts? I tried that but didnt get desired results. Was facing issues with transparency in IE 6. Also how will i show a loading message + image in such a transparent div?

TIA

解决方案

Javacript to show a curtain:

function CalculateAmountOnClick () {
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function(){ return false; }
  try {
    // your operations
  }
  finally {
    curtain.parentNode.removeChild( curtain );
  }
}

Your CSS:

#curtain {
  position: fixed;
  _position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  _height: expression(document.body.offsetHeight + "px");
  background: url(curtain.png);
  _background: url(curtain.gif);
}

(Move MSIE 6 underscore hacks to conditionally included files as desired.)

You could set this up as add/remove functions for the curtain, or as a wrapper:

function modalProcess( callback ) {
  var ret;
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function(){ return false; }
  try {
    ret = callback();
  }
  finally {
    curtain.parentNode.removeChild( curtain );
  }
  return ret;
}

Which you could then call like this:

var result = modalProcess(function(){
  // your operations here
});

这篇关于Javascript - 加载/忙碌指示符或事件点击页面上的透明div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！