加載消息出現在頂部而不是中間

我想在加載頁面時使用ajax顯示加載消息。我有代碼，但消息顯示在頂部..我希望它在屏幕中間.. 我該怎麼辦？代碼片段是：加載消息出現在頂部而不是中間

<div id='loadpage'> 
     <table height=100% width=100% border=0> 
      <tr height=100%> 
       <td width=100% align=center valign=center>Please Wait</td> 
      </tr> 
     </table> 
</div> 
var progressTimeID = setTimeout("document.getElementById('loadpage').innerHTML='<table style=\"height:100%;\" width=100% border=0><tr height=100%> <td width=100% align=center valign=center>Please Wait</td></tr></table>';", 1000); 
clearTimeout(progressTimeID);

日Thnx提前

來源

2012-10-01 abcuser

爲它創建一個jsFiddle，我可能會幫助！一般valign讓我頭痛，我建議你在這個時代遠離基於表格的佈局。 –

我編輯了我的答案，以便它符合您的需求，試試吧... – Develoger

我相信這是因爲沒什麼您height=100% 100％是什麼。所以請確保所有父母都有一個確定的身高。甚至你的身體。

來源

2012-10-01 14:06:21 Salketer

您需要在您的CSS中將html,body和div#loadpage設置爲height:100%。

html, 
body, 
div#loadpage 
{ 
    width: 100%; 
    height: 100%; 
}

來源

2012-10-01 14:07:04

在這裏你去：

編輯：

<html> 
<head> 

<script> 

    function load_show() { 

     document.getElementById('loadpage').innerHTML = "<img src=\"http://websurvey.textalk.se/en/pics/ajax-loader-big.gif\" />"; 

    } 

    function show_div() { 

     var progressTimeID = setTimeout(function(){load_show()}, 1000); 

    } 

</script> 

<style> 

    body { 

     background: #fff; 

    } 

    #loadpage { 

     position: absolute; 
     display: block; 
     top: 50%; 
     left: 50%; 
     margin-top: -33px; 
     margin-left: -33px; 
     width: 66px; 
     height: 66px; 

    } 

    #click { 

     position: absolute; 
     top: 20px; 
     left: 50%; 
     margin-left: -50px; 
     width: 100px; 
     height: 20px; 
     cursor: pointer; 

    } 

</style> 

</head> 
<body> 

<div id="click" onclick="show_div()"> 
    show loader 
</div> 

<div id="loadpage"> 
    CONTENT 
</div> 

</body> 
</html>

不要使用表格佈局請。
只有在啓動後才能清除超時。它會制動它，使其不執行...

來源

2012-10-01 14:07:32 Develoger

@ Dusan Radojevic：我必須使用表格，它應該可以在所有瀏覽器中工作... – abcuser

這是在所有瀏覽器中工作...我不當然不知道IE6，但我認爲它也可以在那裏使用。我並不是想支持基於表格的設計。 – Develoger

加載消息出現在頂部而不是中間

回答

相關問題