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>