Javascript：Ajax和Show/Hide Div

我使用Ajax为我的网页请求一些信息，并在Ajax运行时弹出一个“Please Wait”窗口。Javascript：Ajax和Show/Hide Div

这在Mozilla和Chrome中运行正常，但“请稍候”窗口不显示在IE中。

这里是我的代码：

function openWaitMessage() 
{ 
    var wid = 300; 
    var hgt = 200; 
    var left = 0; 
    var top = 0; 

var myWidth = 0, myHeight = 0; 
if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight; 
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight; 
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    myHeight = document.body.clientHeight; 
} 

var scrOfX = 0, scrOfY = 0; 
if(typeof(window.pageYOffset) == 'number') { 
    //Netscape compliant 
    scrOfY = window.pageYOffset; 
    scrOfX = window.pageXOffset; 
} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 
    //DOM compliant 
    scrOfY = document.body.scrollTop; 
    scrOfX = document.body.scrollLeft; 
} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { 
    //IE6 standards compliant mode 
    scrOfY = document.documentElement.scrollTop; 
    scrOfX = document.documentElement.scrollLeft; 
} 

left = scrOfX + (myWidth - wid)/2; 
top = scrOfY + (myHeight - hgt)/2; 


var div = document.getElementById("pleaseWait"); 
div.style.display = ''; 
div.style.visibility = 'visible'; 
div.style.left = left; 
div.style.top = top; 

} // openWaitMessage() 

    function getInformation { 
     openWaitMessage(); 

    ////////////////////////////////////////////////////////////////////// 
    // create a new ListRequest object and add the 'category' parameter // 
    ////////////////////////////////////////////////////////////////////// 
    var listRequest = new ListRequest("lotatt-request"); 

    ///////////////////////////////////// 
    // create a new AjaxRequest object // 
    ///////////////////////////////////// 
    var ajaxRequest = new AjaxRequest("/MyProject/services"); 

    ///////////////////////////////////////// 
    // send the list request to the server // 
    ///////////////////////////////////////// 
    sendListRequest(ajaxRequest,listRequest,fillLotAtt,ajaxError); 
    }

HTML：

<div id="pleaseWait" style=" display: none; visibility: hidden; position:absolute; left:0px; top:0px; width:300px; height:200px; z-Index:999;"> 
    <table border="1" cellspacing="0" cellpadding="0" width="100%"> 
     <tr class="dialogHeaderCell" > 
      <td> 
       Please Wait... 
      </td> 
     </tr> 
     <tr> 
      <td align="center"> 
       <img src="please_wait.gif" alt="Loading...Please wait."> 
      </td> 
     </tr> 
    </table> 
</div> 

    <input type="button" name="DisplayInfo" class="secondary_button" value="Display Information " onClick="getInformation()"/>

请帮帮忙，谢谢你的设置提前left和top当编程

来源

2012-02-27 Ianthe

'// IE 4 compatible'好神，有必要吗？ – Chad 2012-02-27 03:08:56

也许它是屏幕外的？您是否使用IE开发工具检查了div的左侧属性和顶端属性？ – bfavaretto 2012-02-27 03:32:05

我该怎么做？你能指导我吗？我已安装IE开发工具，但不知道如何使用它 – Ianthe 2012-02-27 03:34:05

Sprenna，正如你所提到的，你也可以选择使用jQuery。如果你想要一些深入的阅读，那么看看these three free jQuery books。

如果您想要简短介绍，请查看this list of jQuery tutorials。

然而，在短，使用jQuery可以使用此代码来显示/隐藏的HTML元素：

$("#pleaseWait").show(); 
// or 
$("#pleaseWait").hide();

#是ID选择器。因此#foo选择其ID为foo的元素。

然后，您可以使用jQuery offset function来定位相对于文档的元素。

最后，您可以使用jQuery width和height函数来设置所需元素的大小。

我还建议您阅读jQuery创建者的Pro JavaScript Techniques。它显着提高了您的JavaScript知识和技能。

来源

2012-02-27 22:05:23 Behrang

一个可能的原因是没有附加的CSS单位。试试这个：

div.style.left = left + 'px'; 
div.style.top = top + 'px';

我创建了this jsfiddle所以我们可以玩你的代码。

来源

2012-02-27 15:19:45 bfavaretto

Javascript：Ajax和Show/Hide Div

回答

相关问题