bgiframe与jQuery UI 1.8.9对话框和jQuery 1.5 [英] bgiframe with jQuery UI 1.8.9 Dialog and jQuery 1.5
问题描述
所以我使用jQuery UI的对话框。但是因为我有一个读取有一个常见的错误IE6（这是不幸的，我必须确保这适用于）下拉列表不注意z索引队列。我也读过，有一个方便的插件，在那里叫bgiframe来照顾我的重叠问题。我发现有两种不同的方式，人们说使用它，既不工作。我可能只是做一些真的很蠢的东西，但我需要得到这个工作。
So I am using jQuery UI's dialog box. But as I have a read there is a common bug within IE6 (which is unfortunate that I have to make sure this works for) where dropdown lists do not pay attention to z-index queues. I have also read that there is a handy plugin out there called bgiframe to take care of my overlay woes. I have found 2 different ways people say to use it, and neither work. I may just be doing something really stupid but I need to get this working.
包括jQuery.bgiframe.js版本2.1.1
这是我尝试使用它没有工作的两种方式：（我已经包括所有jQuery- UI，jQuery和bgiframe在我正在工作的页面）
including jQuery.bgiframe.js Version 2.1.1 Here are the 2 ways I have attempted to use it without working: (I have included all jQuery-UI, jQuery, and bgiframe in the page that I am working on)
-
实际插件的文档说：
The documentation from the actual plugin says do this:
$("#selectDropdownThatNeedsFixing").bgiframe();
这会导致一个jQuery异常说Object expect。
This cause a jQuery exception saying saying Object expected.
我从以下页面看到的第二种方式： http：// docs .jquery.com / UI / Dialog / dialog 基本上你只是在初始化对话框时设置 bgiframe：true ：
The second way that I saw from the following page: http://docs.jquery.com/UI/Dialog/dialog basically you just set bgiframe: true when you initialize the dialog:
$( ".selector" ).dialog({ bgiframe: true });
这不会出错，
我错过了什么？我应该使用哪种方式使用bgiframe？任何方向将不胜感激。感谢您的帮助！
Am I missing something? Which way am I supposed to use bgiframe? Any direction would be much appreciated. Thank you for your help!
推荐答案
您不需要为此使用插件。 IE6和z-index的问题是，IE6中的定位元素生成一个新的堆栈上下文，从z-index值为0开始。因此z-index在IE6中不能正常工作。此问题的解决方法是在父选择器中指定z-index值，该值等于子选择器中指定的z-index。
You don't need to use a plugin for this. The problem with IE6 and z-index is, positioned elements in IE6 generate a new stacking context starting with a z-index value of 0. Therefore z-index doesn’t work correctly in IE6. The workaround to this issue is to specify a z-index value in the parent selector that is equal to the z-index specified in the child selector.
以下是我在jsfiddle中所做的示例。
Below is the example i did in 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 z-index为1的子选择器 a 的父代。在此示例中，a将位于b的顶部。让我们说，我们想让b在顶部。我们需要做的是改变子 a 的值，它的父值改为 z-index：0 。这将发送到后面。
Look at .parent#a This is the parent of the child selector a that have a z-index of 1. In this example, a will be on top of b. let's say we want to make b on top on a. All we need to do is change values of both the child a and it's parent to z-index: 0. This will send it to the back.
这篇关于bgiframe与jQuery UI 1.8.9对话框和jQuery 1.5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
