jQuery Dialog 및 Datepicker 플러그인 문제

jQuery Dialog 및 Datepicker 플러그인 문제

---

대화 상자가 있고 대화 상자에 datepicker 필드가 있습니다.

대화 상자를 열고 datepicker 필드를 클릭하면 datepicker 패널이 대화 상자 뒤에 표시됩니다.

zindex, stack, bgiframe과 같은 더 많은 속성을 시도하지만 성공하지는 않습니다.

누군가 나를 도울 수 있습니까?

Tks.

---

이전 답변

z-index(하이픈에 유의하십시오!)는 중요한 속성입니다. 대화보다 크게 설정하고 올바른 요소에 설정했는지 확인하십시오. 방법은 다음과 같습니다.

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

API 변경-2010 년 4 월 17 일

날짜 선택기의 CSS 파일에서 .ui-datepicker항목을 찾아 변경합니다.

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

사용 Z- 인덱스 : 9999 중요한;! Firefox 3.5.9 (Kubuntu)에서 작동했습니다.

---

jquery-ui-1.8 용

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

datepicker에는 z-index를 1로 설정하는 element.style이 있기 때문에 중요한 것이 필요합니다.

---

이것은 나를 위해 일했습니다.

.ui-datepicker {
        z-index: 9999 !important;
    }

---

'input'텍스트 요소에 "position : relative; z-index : 100000;"스타일을 입력합니다.

datepicker div는 입력에서 Z- 색인을 가져 오지만 위치가 상대적인 경우에만 작동합니다.

이 방법을 사용하면 jQuery UI에서 자바 스크립트를 수정할 필요가 없습니다.

---

UI 버전 1.7.2부터 ui-datepicker-div는 더 이상 유효한 CSS 요소가 아닙니다. "ui-datepicker"가 가장 바깥 쪽 래퍼 인 것 같고 Z- 색인을 99999로 설정하면 내가 아는 한 제대로 작동합니다.

---

jquery-ui-1.7.2 용

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>

---

페이지 상단에서 설정하세요. 잘 작동합니다.

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>

---

나는 그것을 호출하여 작동하게

$("#ui-datepicker-div").css("z-index", "1003" );

---

나는 충격을 받았다.

a) 여기에 아무도 datepicker z-Index를 설정하는 프로그래밍 솔루션을 언급하지 않았습니다. b) jQuery DatePicker가 요소에 바인딩 할 때 z-Index를 전달할 수있는 옵션이 없습니다.

I am using a js method to calculate the highest index. We default to checking only divs, because these are the likely elements to get a z-index value and is understandably quicker than parsing every element on the page.

/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
    var index_highest = 0;
    var index_current;
    if(element == undefined){
        element = 'div';
    }
    $(element).each(function(){
        index_current = parseInt($(this).css("z-index"), 10);
        if(index_current > index_highest) {
            index_highest = index_current;
        }
    });
    return index_highest;
}

Because we have to use javascript to bind the datepicker to an element, i.e. $('#some_element').datepicker(), at that time we set the target element's style so that datepicker will pick up the z-index from it. Thanks to Ronye Vernaes (in his answer on this page) for pointing out that datepicker() will pick up the target element's z-Index if it has one and is set to position: relative:

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

this.target is the input element we are making into a datepicker field. At binding time, we get the highest z-index on the page and make the element's z-index one higher. When datepicker icon is clicked, it will pick up that z-index from the input element, because, as Ronye Vernaes mentioned, of the style position: relative.

In this solution, we don't try and guess what the highest z-Index value is going to be. We actually GET IT.

---

The dialog is rendered in an iframe, and is rendered on top of everything else (including dropdowns). Meanwhile the datepicker is rendered in normal HTML and positioned absolutely.

It sounds like the datepicker is being rendered absolutely relative to the parent page instead of the iframe. Have you tried placing the calendar inside the dialog as just a standard, non-absolute-positioned blog? Or you could use dropdowns instead.

---

Solution to jquery datepicker 1.8.3 version, to change z-index value, it is not impossible to change via css.

This one works fine:

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });

---

The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post

To get a z-index of 100. You need an input with z-index:99; and JQueryUI will update the datepicker to be z-index:100

<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; }

You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.

<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; }

ReferenceURL : https://stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins