Question

想知道简单的javascript来覆盖页面中心的div。

只想使用普通的java脚本在页面中心显示和隐藏div ，并显示“Please wait ...”消息并禁用后台。此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>

javascript覆盖中心对齐的模态弹出窗口

2 个答案: