jquery-ui 날짜 선택기 변경 z-index

jquery-ui 날짜 선택기 변경 z-index

그 문제는 꽤 간단하지만, 어떻게 해결해야 할지 잘 모르겠습니다.

jQuery-ui 데이트 픽커와 주문 제작된 "ios style on/off toggle"을 함께 사용하고 있습니다.이 토글은 현재 내 날짜 선택기 상단에 표시되는 일부 절대 위치 요소를 사용합니다.

아래의 7월6일을 덮고 있는 추악한 원을 보다.

이것을 하는 더러운 방법은 (적어도 io는) 내 스타일시트 중 하나에 스타일을 쓰는 것이지만, 나는 이것을 완료하기 위해 선택기가 시작될 때 자바스크립트를 사용하고 싶습니다.

나는 이미 시도했습니다.

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

그리고.

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

하지만 데이트 픽커가 실행될 때마다 z 인덱스가 덮어쓰는 것 같습니다.

어떤 도움이든 감사히 받겠습니다!

jQuery가 재설정하기 때문에 문제의 JS 코드가 작동하지 않습니다.style호출할 때마다 해당 날짜 선택 위젯의 속성을 지정합니다.

쉽게 무시할 수 있는 방법은style의z-index와 함께 있습니다.!important다른 답변에서 이미 언급된 CSS 규칙.그러나 또 다른 대답은 설정을 제안합니다.position: relative;그리고.z-indexDatepicker 위젯에 자동으로 복사되는 입력 요소 자체에 대해 설명합니다.

그러나 요청한 대로 페이지에 불필요한 코드와 처리를 추가하여 정말로 동적으로 설정해야 하는 이유가 무엇이든 간에 다음을 시도해 볼 수 있습니다.

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

피들

다음을 설정하기 위해 지연 함수 개체를 만들었습니다.z-indexjQuery UI에 의해 재설정된 후 호출할 때마다 위젯이 재설정됩니다.당신이 필요로 하는 것이면 충분합니다.

CSS 해킹은 훨씬 덜 추합니다 IMO, 저는 jQuery UI 조작만을 위해 CSS에 공간을 예약합니다(제 페이지의 IE6 조작 바로 위).

좀 더 우아한 방법이 있습니다.다음 CSS 추가:

.date_field {position: relative; z-index:100;}

jQuery가 일정관리를 설정합니다.z-index101로 (해당 원소보다 하나 더 많은). 그position필드는 다음과 같아야 합니다.absolute,relative아니면fixed. jQuery는 절대/상대/고정인 첫 번째 요소의 상위를 검색하고 해당 상위 요소를 가져옵니다.z-index

사용하셔야 합니다.!important인라인을 강제하는 조항z-indexCSS를 사용한 값.

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

부트스트랩 모드와 함께 데이트피커를 사용하려고 할 때 이 방법이 효과가 있었습니다.

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

물론 본인의 필요에 맞게 셀렉터를 변경합니다.부트스트랩 모달에 대한 z-index가 1050으로 설정되어 있어서 "z-index"를 1051로 설정했습니다.

이제 해당 필드가 팝업 대화상자에 있더라도 해당 필드 앞에 유지하기 위해 날짜 선택기는 팝업 z 인덱스를 관련 필드보다 하나 더 많이 설정합니다.기본적으로 z-index는 0이므로 datepicker는 1로 끝납니다.이것이 데이트 픽커를 제대로 보여주지 못하는 경우가 있습니까?제이쿼리 포럼 포스트

z 지수 100을 얻기 위해서입니다.다음과 같은 정보가 필요합니다.z-index:99; UI는 고 JQuery UI입니다로 입니다.z-index:100

<input style="z-index:99;">아니면<input class="high-z-index">고 CSS.high-z-index { z-index: 99; }

또한 대화 상자에서 상속할 z 인덱스를 지정하고 jQueryUI가 z 인덱스를 제대로 탐지하도록 할 수도 있습니다.

<input style="z-index:inherit;">아니면<input class="inhert-z-index">고 CSS.inherit-z-index { z-index: inherit; }

제 경우에는 아무 효과도 없었습니다.날짜 선택기가 있는 입력 유형에 z 인덱스를 추가해야 했습니다.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

가장 좋은 자연스러운 방법은 단순히 날짜 선택 요소를 "상대적인" 위치를 가지고 자신이 통제할 수 있는 위에 표시되는 요소보다 "z-index"가 높은 "플랫폼"에 두는 것입니다.

부트스트랩 날짜 선택기용입니다.

스크롤 때문에 날짜 선택기가 숨겨져 있는 경우, 사용자의 디바이즈에 나타납니다.

overflow-x: visible !important;
overflow-y: visible !important;

당신의 데이트 픽커와 같은 다른 아이템을 포함하는 전체 디브의 CSS에서.

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}

추가할 내용:

    $(document).ready(function()
    {
      $('#datepickers-container').css('z-index', 999999999);
    };

언급URL : https://stackoverflow.com/questions/11533161/jquery-ui-datepicker-change-z-index