javascript覆蓋居中對齊的模式彈出窗口

Question

想知道的簡單javascript將div覆蓋在頁面中心。

只想使用普通的Java腳本來顯示和隱藏帶有“請稍候...”消息的div ，並禁用背景。 此div也應顯示在頁面其他內容的頂部。

我的div看起來像這樣

<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div>

單擊一個按鈕，我想顯示在頁面上對齊的div內容中心。

我不想使用jquery，ExtJS的,,等，以實現這一目標。

我在網上看到了一些示例，這些示例在模式彈出窗口中添加了許多其他功能，只是在尋找簡單，干凈的東西，而這樣做所需的最低限度的JS。

Answer 1

您要顯示的div需要具有一個ID：

<div id="loaderdiv">

然后在您的JavaScript中，使用以下代碼顯示該div：

document.getElementById("loaderdiv").style.display = '';

那就是您所需要的最低限度。

可以使用CSS將圖片居中：

<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px">

Answer 2

<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;">
                <a href="http://example.com">example.com</a><br />
        </div><!--overlay_msg-->
        <div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()">
        </div><!--my_overlay-->
        <script type="text/javascript">
            function showMyOverlay()
            {
                document.getElementById('my_overlay').style.visibility='visible';
                document.getElementById('overlay_msg').style.visibility='visible';
            }
            function hideMyOverlay()
            {
                document.getElementById('my_overlay').style.visibility='hidden';
                document.getElementById('overlay_msg').style.visibility='hidden';               
            }
        </script>