Question

我使用Ajax为我的网页请求一些信息，并在Ajax运行时弹出“Please Wait”窗口。

这在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 ()"/>

请帮忙，先谢谢

Answer 1

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知识和技能。

Answer 2

一个可能的原因是在以编程方式设置left和top时不附加CSS单元。试试这个：

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

我创建了this jsfiddle，因此我们可以使用您的代码。

Javascript：Ajax和Show / Hide Div

2 个答案: