Jquery 날짜 선택기 Z- 색인 문제

슬라이드 쇼 div가 있고 해당 div 위에 datepicker 필드가 있습니다.

datepicker 필드를 클릭하면 datepicker 패널이 슬라이드 쇼 div 뒤에 표시됩니다.

그리고 스크립트를 다음과 같이 넣었습니다.

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

따라서 CSS에서 datepicker의 Z- 색인을 변경할 수 없습니다. 스크립트가 생성하는 datepicker의 z-index는 1이고 내 슬라이드 쇼 div (googleajaxapi를 통해 호출) z-index는 5입니다. 따라서 날짜 선택기의 z-index를 5보다 크게 늘려야한다고 생각합니다. 그것을 늘리는 방법은 무엇입니까?

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

'입력'텍스트 요소에 다음 스타일을 넣으십시오 position: relative; z-index: 100000;..

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

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

단순히 CSS에서 ' .ui-datepicker{ z-index: 9999 !important;}'를 사용하십시오. 여기서 9999는 datepicker를 사용하려는 레이어 값으로 바꿀 수 있습니다. 어떤 코드도 주석을 position:relative;달거나 입력 요소에 ' 'css를 추가해서는 안됩니다 . 입력 요소의 Z- 색인을 늘리면 모든 입력 유형 버튼에 영향을 미치므로 일부 경우에는 필요하지 않을 수 있습니다.

나를 위해 일했다

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

marksyzm 답변을 기반으로 이것은 나를 위해 일했습니다.

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Justin의 대답에 덧붙여서, 깔끔한 마크 업이 걱정되거나 CSS에서이 값을 하드 코딩하지 않으려면 표시되기 전에 입력을 설정할 수 있습니다. 이 같은:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

"position": "relative"플러그인이 두 규칙 또는 스타일 시트에 대해 인라인 스타일을 검색하지만 둘 다가 아닌 , 규칙을 생략 할 수 없습니다 .

는 dialog("widget")팝업 실제 날짜 선택기입니다.

이 문제를 클릭하여 해결했습니다.

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

datepicker를 사용하는 대화 상자가 있습니다. 항상 숨겨져있었습니다. Z- 색인을 조정했을 때 하단 양식의 필드가 항상 대화 상자에 표시되었습니다.

문제를 해결하기 위해 본 솔루션을 조합하여 사용했습니다.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

before show는 datepicker를 선택했을 때 항상 맨 위에 있도록 보장하지만 onClose는 필드의 z-index가 재설정되어 나중에 다른 datepicker로 열린 대화 상자에서 겹치지 않도록합니다.

여기를 참조하십시오 : http://forum.jquery.com/topic/z-index-1-datepicker-1-8

datepicker가 datatables.net tabletools 버튼 위에있는 페이지가 있습니다. 데이터 테이블 버튼은 개별 날짜 선택기 날짜 버튼보다 Z- 색인이 더 높습니다. Ronye의 답변 덕분에 position : relative;를 사용하여이 문제를 해결할 수있었습니다. 및 Z- 색인 : 10000. 감사합니다!

이것은 내가 주제를 놓쳤을 때 나에게 일어났습니다. 테마가 있는지 확인하거나 테마를 다시 다운로드 한 다음 서버에 다시 업로드하십시오.

그것이 내 문제를 해결했습니다.

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

실제로 CSS를 효과적으로 추가 .ui-datepicker{ z-index: 9999 !important;}할 수 있지만 ui-datepicker 클래스 끝에 수정 jquery-ui.css하거나 jquery-ui.min.css추가 할 수 있습니다 z-index: 9999 !important;. 두 가지 모두 나를 위해 작동합니다 (하나만 필요합니다 ;-))

datepicker가 입력의 Z- 색인을 사용하기 때문에이 문제도 발생했습니다. 다음 CSS를 추가했습니다.

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

부모 ID, 클래스 또는 내 경우에는 입력 그룹 및 양식 제어를 사용하여 부트 스트랩 대화 상자에 적용되는 규칙을 취하십시오.

나는해야했다

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}