jquery - 在 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 中(实际上是向下几个)。毯子只是简单地贴在 body 的末端。因此它位于相对定位的 div 之外并启动了它自己的 z-index 堆栈(如记录 here )。由于 IE 6/7 在这方面有问题，无论我将 z-index 设置为什么，它总是在毯子下面。

所以我将毯子移到相对定位的 div 中的第一个子项。这还不是 100% 完成，因为如果你滚动(我不能用这个解决方案停止)，毯子 div 只是可见内容的高度。我现在必须弄清楚如何获得内容的完整高度(可见和不可见)。

Answer 1

养成包含更高 z-index 的习惯。使用以下内容:

z-index:20000;

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