jquery-ui datepicker 변경 Z- 색인

jquery-ui datepicker 변경 Z- 색인

---

문제를 해결하는 방법을 찾는 데 어려움을 겪고 있지만 문제는 매우 간단합니다.

사용자 정의 "ios 스타일 켜기 / 끄기 토글"과 함께 jQuery-ui datepicker를 사용하고 있습니다. 이 토글은 현재 내 날짜 선택기 위에 표시되는 절대 위치 요소를 사용합니다.

아래 7 월 6 일을 덮고있는 추악한 원을보십시오 ...

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

나는 이미 시도했다

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

과

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

그러나 datepicker가 시작될 때마다 z-index가 덮어 쓰여지는 것 같습니다.

어떤 도움을 주시면 감사하겠습니다!

---

jQuery가 style호출 할 때마다 datepicker 위젯 의 속성을 재설정하기 때문에 질문의 JS 코드가 작동하지 않습니다 .

그 무시하는 쉬운 방법 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-index위젯 을 설정할 때마다 jQuery UI에 의해 재설정 된 후 호출 할 때마다 지연된 함수 객체를 생성 했습니다. 그것은 당신의 필요로 충분할 것입니다.

CSS 해킹은 훨씬 덜 추한 IMO이며, jQuery UI 조정 (내 페이지의 IE6 조정 바로 위에 있음)을 위해서만 CSS에 공간을 예약합니다.

---

더 우아한 방법이 있습니다. 이 CSS를 추가하십시오.

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

jQuery는 달력 z-index을 101 (해당 요소보다 하나 더)으로 설정합니다. position필드가 있어야합니다 absolute, relative또는 fixed. jQuery는 절대 / 상대 / 고정 인 첫 번째 요소의 부모를 검색하고z-index

---

CSS를 사용하여 !important인라인 z-index값 을 적용하려면 절 을 사용해야 합니다.

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

---

이것은 부트 스트랩 모달과 함께 datepicker를 사용하려고 할 때 나를 위해 일했습니다.

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

물론 필요에 맞게 선택기를 변경하십시오. 부트 스트랩 모달의 Z- 색인이 1050으로 설정 되었기 때문에 "z-index"를 1051로 설정했습니다.

---

datepicker는 이제 팝업 Z- 색인을 관련 필드보다 하나 더 설정하여 해당 필드가 팝업 대화 상자에있는 경우에도 해당 필드 앞에 유지합니다. 기본적으로 Z- 색인은 0이므로 datepicker는 1로 끝납니다. datepicker가 제대로 표시되지 않는 경우가 있습니까? JQuery 포럼 게시물

Z- 색인 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; }

또한 대화 상자에서 상속해야하는 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- 인덱스"가 더 높은 "플랫폼"에 배치하는 것입니다.

---

이것은 Bootstrap datetimepicker입니다.

스크롤이 div에 나타나기 때문에 datepicker가 숨어있는 경우 다음을 사용하십시오.

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

datepicker 및 기타 항목을 포함하는 전체 div의 CSS에서

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

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