背景半透明的div

Question

我想展示一些对话框（绝对定位的div），并希望将其显示在半透明的100% div之上，以便背景上的所有内容都会变暗。 我已经通过以下方式实现：

<div class='transpBox'></div>

.transparentBox
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #white;
    opacity: 0.9;
    z-index: 499;
}

这样做没有问题，但是当对话框高度超过浏览器高度并且向下滚动时，您会发现透明的div并不完全覆盖屏幕。 正确的方法是什么？

- user283010

Answer 1

使用position: fixed代替position: absolute。（在对话框div上也要使用它。）

absolute基于页面定位，fixed基于窗口定位。

- Casey Chu

---

为什么这个答案被标记为社区维基？顺便说一下，这不是你不必要地标记的第一个答案。 - BalusC

对不起，我是新来的。我该做什么？这个回答有帮助！=) - user283010

@Balus，在我发完这个帖子后，我决定实际上搜索一下那意味着什么，而不是盲目地勾选框。 - Casey Chu

@plasticrabbit：这条评论是针对Casey的 :) @Casey：好的 :) - BalusC

Answer 2

也许你应该尝试使用jQuery 模态对话框，而不是自己创建过程。这样做将为您提供半透明的背景和对话框前景。

- Hanseh