jQuery UI 1.8.9 대화와 jQuery 1.5가있는 bgiframe

Question

그래서 jQuery UI의 대화 상자를 사용하고 있습니다. 그러나 읽은 읽기가있는 것처럼 IE6 (IE6) 내에 공통의 버그가 있습니다 (이는이 작품을 위해이 작품을 확인 해야하는지 확인해야합니다). 드롭 다운 목록은 Z-Index 대기열에주의를 기울이지 않습니다. 또한 Bgiframe이라고 불리는 편리한 플러그인이 있음을 읽었습니다. 나는 사람들이 그것을 사용하기로하는 2 가지 다른 방법을 발견했으며, 어느 쪽이도하지 못했습니다. 나는 단지 정말로 어리석은 일을 할 수 있지만이 일을해야합니다.

jquery.bgiframe.js 버전 2.1.1을 포함합니다 다음은 작업하지 않고 사용하려고 시도한 2 가지 방법입니다.

1. 실제 플러그인의 문서는 다음을 수행합니다.

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

   .

   jQuery 예외가 예상되는 대상을 말하는 것입니다.

2. 다음 페이지에서 본 두 번째 방법 : http : // docs. jquery.com/ui/dialog/dialog 대화 상자를 초기화 할 때 bgiframe: true를 설정합니다.

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

   이것은 오류가 아닙니다.하지만 문제가 IE6 내에서 여전히 존재합니다.

   뭔가를 놓치고 있습니까? 어떤 방법으로 BGIFRAME을 사용해야합니까? 어떤 방향도 감사하게 될 것입니다. 당신의 도움을 주셔서 감사합니다!

Answer 1

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.

Check working example at http://jsfiddle.net/ebgnu/2/

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>

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.

Answer 2

I believe that you're supposed to call the bgiframe plugin on the dialog, not the < select >. The current jQuery UI version doesn't seem to list the bgiframe option for the dialog widget anymore.

The jQuery Exception you're getting seems to indicate, that the element that you're targeting doesn't exist for the selector specified (#selectDropdownThatNeedsFixing).

If the problem persists, try to use the IE Developer Toolbar to find out if the iframe is actually created.