3

我没有一个独特的问题，但对于我的生活，我无法弄清楚我做错了什么。

我有一个包含一系列部分的页面。该部分的一部分是一个小图像。单击图像时，我想显示一个自定义控件。显示控件是微不足道的，将 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 之外的所有浏览器上得到的。在即...它可以控制文档，并且两者都被毯子覆盖。

回答

scunliffe是最接近的（在我无法链接到的评论中回答）。自定义控件位于一个相对定位的 div 内（实际上向下几个）。毯子只是简单地附加在身体的末端。因此，它位于相对定位的 div 之外并启动了它自己的 z-index 堆栈（如此处所述）。由于 IE 6/7 在这方面被破坏了，无论我将 z-index 设置为什么，它总是在毯子下面。

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

4

6 回答 6

1

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

z-index:20000;

当然，在您的自定义控件上增加 z-index。高 z-index 解决了我的类似问题。

于 2008-12-17T20:48:29.747 回答
1

我也遇到了麻烦。我发现创建不可穿透屏蔽的唯一方法是将图片放在 DIV 的背景中（透明的 GIF 对我有用）。然后您仍然必须拦截键盘事件以防止导航到控件。

于 2008-12-17T21:10:20.717 回答
1

scunliffe是最接近的（在我无法链接到的评论中回答）。自定义控件位于一个相对定位的 div 内（实际上向下几个）。毯子只是简单地附加在身体的末端。因此，它位于相对定位的 div 之外并启动了它自己的 z-index 堆栈（如此处所述）。由于 IE 6/7 在这方面被破坏了，无论我将 z-index 设置为什么，它总是在毯子下面。

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

于 2009-01-14T01:16:30.460 回答
0

以下是我们对项目进行不透明性的方式：

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

这在 IE 6 & 7 和 FF 2 & 3 上测试良好。我相信它也适用于 Safari。

于 2008-12-17T20:42:16.030 回答
0

你没有提到自定义控件的组成，但是如果你的自定义控件中有一个选择元素，那么这会导致 ie 中的模式问题（不记得他们是否在 ie7 中解决了这个问题）。无论如何，此信息可以帮助您解决问题。你需要一个 iframe 垫片来防止它通过覆盖显示。许多脚本将为您执行此操作。

更多信息

和这里

于 2008-12-17T20:57:00.010 回答
0

只是为了把我的帽子扔进去......

我不久前刚刚实现了这个，我使用了：

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 中工作。

于 2008-12-17T21:28:09.323 回答