문제 와 대화하고 Datepicker 플러그인

StackOverflow https://stackoverflow.com/questions/715677

  •  23-08-2019
  •  | 
  •  

문제

나는 대화,그리고 나는 datepicker 분야에서 대화상자가 나타납니다.

때 열린 대화상자에서 클릭 datepicker 필드 datepicker 패널 표시 뒤에는 대화입니다.

내가 하려고 더 많은 속성:zindex,스택,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으로 설정하는 요소가 있기 때문에 중요한 것은 필요합니다.

이것은 나를 위해 효과가있었습니다.

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

다음 스타일을 '입력'텍스트 요소에 넣습니다. "위치 : 상대; z-index : 100000;".

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

이러한 방식으로 사용하면 jQuery UI에서 JavaScript를 수정할 필요가 없습니다.

UI 버전 1.7.2 UI-DatePicker-DIV는 더 이상 유효한 CSS 요소가 아닙니다. "ui-datepicker"는 가장 멋진 래퍼 인 것 같습니다. z-index를 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 때에 바인딩하는 요소입니다.

내가 사용하 js 을 계산하는 방법을 가장 높은 색인.우리가 기본적으로 확인만 div 기 때문에 이러한 가능성이 높은 요소를 얻는 z-index 값은 당연보다 더 빨리 분석의 모든 요소입니다.

/* 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;
}

우리가 가지고 있기 때문에 자바스크립트를 사용하는 바인딩 datepicker 하는 요소,즉$('#some_element').datepicker(),그 시간이 우리가 목표를 설정하는 요소의 스타일도록 datepicker 이 선택됩니다 z-index 습니다.감사 Ronye Vernaes(에서 그의 대답에 이 페이지)을 가리키는 것으로 나 datepicker()선택할 것입은 대상 요소의 z-Index 경우에 한하고 설정된 위치:상대:

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

다.대상은 입력이 요소리로 datepicker 필드입니다.에 바인딩 시,우리는 최고 z-index 페이지에서 확인 요소의 z-index 하나 더 높습니다.때 datepicker 아이콘을 클릭하면,그것을 선택하는 z-index 에서 입력하기 때문에,로 Ronye Vernaes 언급한 스타일의 위치상대적이다.

이 솔루션에서 우리는 하려고 하지 않고 무엇을 생각 가장 높은 z-Index 값이 될 것입니다.실제로 우리가 그것을 얻을.

대화 상자는 iframe로 렌더링되며 다른 모든 것 (드롭 다운 포함)에 렌더링됩니다. 한편 DatePicker는 정상적인 HTML로 렌더링되어 절대적으로 배치됩니다.

DatePicker가 iframe 대신 부모 페이지에 대해 절대적으로 렌더링되는 것처럼 들립니다. 대화 상자 내부에 캘린더를 표준적이고 비만 위치가없는 블로그로 배치 해 보셨습니까? 또는 대신 드롭 다운을 사용할 수 있습니다.

jQuery DatePicker 1.8.3 버전에 대한 해결책 z-index 값을 변경하려면 CSS를 통해 변경하는 것은 불가능하지 않습니다.

이것은 잘 작동합니다.

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

DatePicker는 이제 팝업 Z-INDEX를 관련 필드보다 하나 이상으로 설정하여 해당 필드 자체가 팝업 대화 상자에 있더라도 해당 필드 앞에 유지합니다. 기본적으로 z-index는 0이므로 DatePicker는 1로 끝납니다. DatePicker를 제대로 표시하지 않는 경우가 있습니까? jQuery 포럼 게시물

z-index를 100으로 얻으려면 입력이 필요합니다. z-index:99; 그리고 jqueryui는 DatePicker를 업데이트 할 것입니다 z-index:100

<input style="z-index:99;"> 또는 <input class="high-z-index"> 그리고 CSS .high-z-index { z-index: 99; }

또한 대화 상자에서 상속되어 jQueryui가 z-index를 올바르게 감지하게하는 z-index를 지정할 수도 있습니다.

<input style="z-index:inherit;"> 또는 <input class="inhert-z-index"> 그리고 CSS .inherit-z-index { z-index: inherit; }

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top