在IE 7中使用叠加层以防止干扰后台控件

Question

我没有一个独特的问题，但是我无论如何都想不出我做错了什么。

我有一个页面，上面有一系列的部分。每个部分有一个小图像。当单击图像时，我想显示一个自定义控件。显示控件很简单，将z-index设置得更高一些，以确保控件在所有元素的顶部。

但是用户仍然可以与控件后面的部分进行交互。

为了阻止这种情况，我添加了一个“遮罩层”。基本上是一个div，大小与文档相同，具有以下CSS（使用jQuery语法）-

{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: $(document).height(),
  display: 'none',
  zIndex: 1,
  backgroundColor: '#FF0000'
};

为了测试，我把背景色设成了红色。将透明度设置为0.1（轻模糊）。然后我将自定义控件的z-index设置为2，以便它位于遮罩层之上。

这在Firefox、Chrome和Safari中完美运行，但在IE中不行。

自定义控件不是遮罩层的子元素。

目标是使以下文档被遮罩层覆盖，并使控件位于遮罩层之上以与之交互。这是我在所有浏览器上都能得到的结果，除了IE。在IE中，情况是文档和控件都被遮罩层覆盖。

答案

scunliffe 最接近答案（回答在我无法链接的评论中）。自定义控件在一个相对定位的 div 中（实际上是几个 div 下面）。遮罩层仅仅是添加到 body 的末尾。因此，它位于相对定位的div外部并启动了它自己的z-index堆栈（如 这里 所述）。由于IE 6/7在这方面有问题，无论我将z-index设置为什么，它都会始终低于遮罩层。

所以我把遮罩层移到了相对定位的div中的第一个子元素。这还没有完全解决，因为如果你滚动（我不能用这个解决方案来停止滚动），遮罩层 div 只有可见内容的高度。现在我必须找出如何获取内容的完整高度（可见和不可见）。

- Justin Rudd

Answer 1

scunliffe 是最接近的（在我无法链接到的评论中回答）。自定义控件位于相对定位的 div 内部（实际上有几个）。毯子只是简单地添加到了 body 的末尾。因此，它在相对定位的 div 外部，并开始了自己的 z-index 堆栈（如 此处 所述）。由于 IE 6/7 在这方面存在问题，无论我将 z-index 设置为什么，它都会始终在毯子下面。

因此，我将毯子移动到相对定位的 div 内部的第一个子元素。这还不完全完成，因为如果您滚动页面（使用此解决方案无法停止滚动），毯子 div 只有可见内容的高度。现在我必须找出如何获取内容的完整高度（可见和不可见的）。

- Justin Rudd

Answer 2

我也遇到了这个问题。我发现创建一个不可穿透的屏障的唯一方法是在 DIV 的背景中放置一张图片（一个透明的 GIF 对我很有用）。然后，你仍然需要拦截键盘事件来防止导航到控件。

- Vilx-

---

一张图片并不是必需的，但键盘事件非常重要需要注意。 - annakata

我认为IE6存在需要图片的问题。 - Vilx-

Answer 3

养成一个习惯，包含一个更高的 z-index。使用以下代码：

z-index:20000;

当然，提高自定义控件的 z-index 值。高的 z-index 值解决了我类似的问题。

- Mike

---

是的...我将遮罩层的 z-index 设为 10000，自定义控件的 z-index 设为 20000。但是控件仍然出现在遮罩层下面。 - Justin Rudd

Answer 4

你没有提到自定义控件包含什么，但是如果你的自定义控件中有一个选择元素，那么这会在IE中引起模态问题（我记不清他们是否在IE7中修复了这个问题）。无论如何，这些信息可能会帮助你解决问题。

你需要一个iframe遮罩来防止它穿过覆盖层显示。有很多脚本可以为你完成这个操作。

更多信息请参见此处和这里。

- redsquare

---

没有选择标签。只有一个文本框和几个复选框。 - Justin Rudd

Answer 5

以下是我们如何在项目中处理透明度的方法：

.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}

在IE 6和7以及FF 2和3上测试良好。我相信它在Safari上也可以工作。

- Jason Jackson

---

我遇到的问题不是透明度，而是自定义控件的z-index。蒙层显示正常，但是尽管自定义控件的z-index高于蒙层，但它仍在蒙层下面。这就是我要解决的问题。 - Justin Rudd

你把“blanket”加在哪里了？IE会创建新的堆叠索引，在某些情况下你无法超过它们。我建议你确保你的控件在DOM中比“blanket”更低。 - scunliffe

你可能需要在问题中更加明确一些。我刚刚重新阅读了你的问题，但并不清楚你是否在询问那个方面。 - Jason Jackson

嘿，scunliffe，我认为你已经找到了问题所在。我发现这个网站(http://aplus.rs/lab/z-pos/)可以展示IE上的问题。由于毯子在我的控件之后出现在DOM中，它会破坏z-index堆叠。 - Justin Rudd

@scunliffe：你应该把这个评论放在一个回答里，这样Justin就可以标记它已经解决了。 - sep332

Answer 6

只是随便说一句...

我刚刚实现了这个功能，我使用了：

div#shade-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    filter: Alpha(opacity=70);
}

显然，您可以更改或删除背景颜色。我通过Javascript将此div添加到DOM中，因此无需担心z-index。

已知可在FF和IE7中使用。

- beardog