[javascript] jQuery-UI의 자동 완성이 제대로 표시되지 않음, Z- 색인 문제

Program / 글쓴이

현재 내 클라이언트 웹샵에서 jQuery UI의 자동 완성을 구현하고 있습니다. 문제는 자동 완성이있는 요소가 자동 완성의 Z- 색인보다 높은 Z- 색인을 갖는다는 것입니다. 자동 완성 Z- 색인을 수동으로 설정하려고 시도했지만 jQuery UI가 이것을 덮어 쓰는 느낌이 듭니다.

사실 내 질문이 자동 완성 제안 목록 의 중복 된 Z- 색인입니다. 어떻게 변경할 수 있나요? 하지만 답이 없었기 때문에 다시 시도 해볼까 생각했다.

어떤 도움이라도 환영합니다!

Martijn

답변

사용 z-index및!important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}

답변

검색하는 동안이 주제 (http://forum.jquery.com/topic/alternating-style-on-autocomplete)를 찾았습니다. 자동 완성 상자의 스타일을 변경하는 유일한 방법은 자바 스크립트를 통해 수행하는 것입니다.

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

답변

상위 Div의 Z- 색인을 변경하면 자동 완성 메뉴에 div의 Z- 색인 +1이 표시됩니다.

답변

의 CSS에서 jQuery UI:

.ui-front { z-index: 9999; }

답변

이것을 시도하면 런타임 또는 초기화시 Z- 색인을 조작 할 수 있습니다.

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

답변

자동 완성 텍스트 입력에 더 높은 Z- 색인을 적용 할 수 있다면 이것이 문제의 해결책입니다.

jQuery UI Autocomplete 옵션 목록은 첨부되는 텍스트 입력의 Z- 색인을 가져 와서 해당 값에 1을 더하여 Z- 색인 값을 계산합니다.

따라서 텍스트 입력에 999의 Z- 색인을 제공 할 수 있습니다. 자동 완성의 Z- 색인 값은 1000입니다.

http://bugs.jqueryui.com/ticket/5489 에서 가져옴

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

답변

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}