[jquery] 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로 열린 대화 상자에서 겹치지 않도록합니다.