Jquery 날짜 선택기 z 인덱스 문제

Jquery 날짜 선택기 z 인덱스 문제

저는 슬라이드 쇼 디비를 가지고 있고, 그 디비 위에 날짜 선택 필드를 가지고 있습니다.

날짜 선택기 필드를 클릭하면 날짜 선택기 패널이 슬라이드 쇼 div 뒤에 표시됩니다.

그리고 대본을 다음과 같이 작성했습니다.

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

그래서 나는 CSS에서 datepicker의 z-index를 변경할 수 없습니다.스크립트가 생성하는 날짜 선택기의 z-index는 1이고, my slideshow div(구글아작사피를 통해서도 호출) z-index는 5입니다.그래서 저는 달력 보기의 z 지수를 5 이상으로 늘려야 한다고 생각합니다.그래서 그것을 늘릴 방법이 없을까요?

누가 도와줄 수 있어요?

'입력' 텍스트 요소에 다음 스타일을 입력합니다.position: relative; z-index: 100000;.

날짜 선택기 div는 입력에서 z 인덱스를 가져오지만, 이는 위치가 상대적인 경우에만 작동합니다.

이 방법을 사용하면 jQuery UI에서 Javascript를 수정할 필요가 없습니다.

단순히 당신의 css에서 '를 사용합니다..ui-datepicker{ z-index: 9999 !important;}여기서 9999는 날짜 선택기를 사용할 수 있는 모든 레이어 값으로 대체할 수 있습니다.코드에 주석을 달거나 추가해서는 안 됩니다.position:relative;입력 요소의 css.입력 요소의 z 인덱스를 늘리면 모든 입력 유형 버튼에 영향을 미치므로 일부 경우에는 필요하지 않을 수 있습니다.

나를 위해 일했습니다.

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

marksyzm 답변을 기반으로, 이것은 저에게 효과가 있었습니다.

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

날짜 선택기를 사용하는 대화 상자가 있습니다.그것은 항상 숨겨져 있었습니다.제가 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  } ); }                    
            });

이전 쇼에서는 날짜 선택기를 선택할 때 항상 맨 위에 있지만, onClose를 선택하면 나중에 다른 날짜 선택기로 여는 대화 상자에서 필드의 z 인덱스가 겹치지 않도록 필드가 재설정됩니다.

저스틴의 대답에 덧붙여, 만약 당신이 어수선한 마크업이 걱정되거나 이 값이 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');

다음을 참조하십시오. http://forum.jquery.com/topic/z-index-1-datepicker-1-8

datatables.net 태블릿 도구 단추 위에 날짜 선택기가 있는 페이지가 있습니다.데이터 테이블 단추의 z 인덱스가 개별 날짜 선택기 날짜 단추보다 높습니다.Ronye의 답변 덕분에 위치: relative, z-index: 10000을 사용하여 이 문제를 해결할 수 있었습니다.감사합니다!

제가 주제를 놓쳤을 때 이런 일이 일어났습니다.테마가 존재하는지 확인하거나 테마를 다시 다운로드한 후 서버에 다시 업로드합니다.

그것이 내 문제를 해결한 것입니다.

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

의 css를 추가할 수 ..ui-datepicker{ z-index: 9999 !important;}하지만 당신은 수정할 수 있습니다.jquery-ui.css또는jquery-ui.min.css 클래스의 합니다.z-index: 9999 !important;두 가지 모두 저에게 효과가 있습니다(하나만 필요합니다;-).

해야만 했어요

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

저도 이 문제가 있었는데, 날짜 선택기가 입력의 z 인덱스를 사용하기 때문에 다음과 같은 css를 추가했습니다.

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

부모 ID, 클래스 또는 부트스트랩 대화 상자에 따라 입력 그룹 및 양식 제어를 사용하여 해당 규칙을 적용합니다.

언급URL : https://stackoverflow.com/questions/7033420/jquery-date-picker-z-index-issue