Question

我的网页上有form和div：

<body>
    <form id="form1" runat="server">
        ...
    </form>
    <div id="wizardDiv" style="width: 100%; height: 100%;background-color:black;display:none">
        <div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 0 auto;">                
           ...
        </div>
    </div>
</body>

点击一下按钮，我可以看到div，我希望它覆盖整个页面，而内部div正好位于中间（中间，水平和垂直）。）只需就像一个弹出式模式。

说明： enter image description here

当前的html无效以下内容：

div未覆盖整个页面，它位于form之后，而是覆盖它。
内部div仅水平居中而非垂直居中。

我在这里缺少什么？

我的方法是“浏览器兼容性”安全吗？（也许我应该寻找一个Jquery解决方案？）

最终解决方案：

我最终使用了：

Answer 1

使用稍微不同的标记和css来定位叠加层和弹出窗口。

构建一个这样的简单标记：

<form id="form1" runat="server">
    ...
</form>
<div id="overlay"></div>
<div id="popup">Popup</div>

注意我还没有把弹出窗口放在叠加层中。虽然这样做没有什么坏处，但如果你想用css不透明度设置你的叠加层样式，那么它中包含的所有内容也将是半透明的。

然后使用以下CSS：

#overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    z-index:998;
    background-color: Black;
    opacity: .5;
}

#popup {
    position: absolute;
    width:50%;
    background-color:#8DA5C6;
    z-index: 999;
}

两个元素都必须position: absolute才能退出页面流。
叠加层必须覆盖整个空间。这是通过top, left, right, bottom, width, height
使用z-index，您可以让他们始终掌握其他内容。叠加层较低，弹出窗口较高，

您可以查看此fiddle以获取有效工作示例。

注意：

这不是弹出窗口的中心。它需要做更多的工作并且它有点复杂（如果弹出窗口在调整窗口大小时保持居中，弹出窗口是否固定大小......）。

我猜这需要一些javascript。

您无法在绝对定位元素上使用margin: 0 auto;。

Answer 2

你可以在Jquery的帮助下实际做到这一点。

<div class="overlay"></div>
<div id="form-container">
   <form>
       ...//codes here
   </form>
</div>

确保叠加层的高度与页面相同，宽度为0，位置为绝对值。在触发事件时，使用jQuery为叠加层设置动画以覆盖整个网页。

希望这有助于= D

Answer 3

试试这段代码

<body>
    <form id="form1" runat="server">
        ...
    </form>
    <div id="wizardDiv" style="position:fixed;top:0;left:0;width: 100%; height: 100%;background-color:black;display:none" z-index:998>
        <div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 20 auto;">                
           ...
        </div>
    </div>
</body>

我只是修改你的代码，如果我像这样编写css，它可能是可读的：

#wizarddiv{
  position:fixed; /* it make the overlay have fixed position even you scroll the page */
  top:0; /* let make the overlay pushed up, to the top of the screen. */
  left:0; /* you probably know what it this */
  z-index: 999; /* set to the higher value, also note that you don't need to set it too to the child element.
  background: rgba(0,0,0,.5);
}

如何将DIV放在所有页面和页面中间？

3 个答案: