bgiframe 与 jQuery UI 1.8.9 对话框和 jQuery 1.5

Question

所以我使用 jQuery UI 的对话框。但正如我所读到的，IE6 中有一个常见的错误（不幸的是我必须确保它适用），其中下拉列表不关注 z-index 队列。我还读到有一个名为 bgiframe 的方便插件可以解决我的覆盖问题。我发现人们说有两种不同的使用方法，但都不起作用。我可能只是做了一些非常愚蠢的事情，但我需要让它发挥作用。

包括jQuery.bgiframe.js版本2.1.1这是我尝试使用它而不工作的两种方法：（我已将所有 jQuery-UI、jQuery 和 bgiframe 包含在我正在处理的页面中）

1. 实际插件的文档说这样做：

   $("#selectDropdownThatNeedsFixing").bgiframe();
   

   这会导致 jQuery 异常，显示“预期对象”。

2. 我从下一页看到的第二种方式： http://docs.jquery.com/UI/Dialog/dialog 基本上你只是设置 bgiframe: true 当您初始化对话框时：

   $( ".selector" ).dialog({ bgiframe: true });
   

这并没有出错，但是当我测试它时，问题仍然存在于 IE6 中。

我错过了什么吗？我应该以哪种方式使用bgiframe？任何方向将不胜感激。感谢您的帮助！

Answer 1

您不需要为此使用插件。IE6 和 z-index 的问题是，IE6 中的定位元素会生成一个以 z-index 值 0 开始的新堆栈上下文。因此 z-index 在 IE6 中无法正常工作。此问题的解决方法是在父选择器中指定一个等于子选择器中指定的 z 索引值。

检查工作示例 http://jsfiddle.net/ebgnu/2/

下面是我在 jsfiddle 中做的例子。

.parent{
    position: relative;
    color:white;
}
.parent#a {
    height: 2em;
    z-index: 1;
}
.parent#a .child{
    position: absolute;
    height: 6em;
    width: 2em;
    z-index: 1;
    background:blue;
}
.parent#b {
    height: 2em;
    background:red;
}

<div class="parent" id="a">
    <div class="child">a</div>
</div>
<div class="parent" id="b">
    <div class="child">b</div>
</div>

看着 .parent#a 这是子选择器的父选择器 a z 索引为 1。在此示例中，a 将位于 b 之上。假设我们想让 b 位于 a 之上。我们需要做的就是改变孩子的价值观 a 它的父级 z-index: 0. 。这会将其发送到后面。

Answer 2

我相信你应该打电话给 bgiframe 插件上的 dialog, ，不是 < select >。当前的 jQuery UI 版本似乎没有列出 bgiframe 对话框小部件的选项不再存在。

您收到的 jQuery 异常似乎表明，指定的选择器不存在您要定位的元素（#selectDropdownThatNeedsFixing).

如果问题仍然存在，请尝试使用 IE 开发工具栏查看是否 iframe 实际上是被创建的。