带有jQuery UI 1.8.9对话框和jQuery 1.5的bgiframe

Question

因此，我正在使用jQuery UI的对话框。但是，当我读到时，IE6中有一个常见的bug (不幸的是，我必须确保这是可行的)，下拉列表没有注意z索引队列。我还读到，有一个方便的插件，称为bgiframe，以解决我的覆盖问题。我发现了两种不同的方式，人们说，使用它，但没有工作。我可能只是在做一些非常愚蠢的事情，但我需要让它发挥作用。

包括jQuery.bgiframe.js版本2.1.1，以下是我尝试在不工作的情况下使用它的两种方法：(我在正在处理的页面中包含了所有jQuery、jQuery和bgiframe )。

来自实际插件的文档

1. 说：

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

这导致了一个jQuery异常，表示对象期望。

• 是我从下面的页面中看到的第二种方式：http://docs.jquery.com/UI/Dialog/dialog --基本上，在初始化对话框时设置bgiframe: true：

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

这并不是错误退出，但是当我测试IE6时，问题仍然存在。

我是不是遗漏了什么？我该怎么用bgiframe？任何方向都将不胜感激。谢谢你的帮助!

Answer 1

你不需要为此使用插件。IE6和z索引的问题是，IE6中的定位元素生成一个新的堆叠上下文，从z索引值0开始。因此，z索引在IE6中不能正常工作。解决此问题的方法是在父选择器中指定与子选择器中指定的z索引相等的z索引值。

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

下面是我用小提琴做的例子。

.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 --这是z-索引为1的子选择器a的父函数。在这个例子中，a将位于b的顶部。假设我们想在a的顶部生成b。我们所需要做的就是改变子a和它的父级z-index: 0的值。这会把它送到后面。

Answer 2

我相信你应该在dialog上调用dialog插件，而不是< select >。当前的jQuery UI版本似乎不再列出对话框小部件的bgiframe选项。

您得到的jQuery异常似乎表明，对于指定的选择器(#selectDropdownThatNeedsFixing)，您要针对的元素不存在。

如果问题仍然存在，请尝试使用来确定是否实际创建了iframe。