팝업에서 z- 인덱스가 작동하지 않습니다.

Question

Jquery 모달 팝업 안에 드롭 다운 목록에 문제가 있습니다.

나는 lu 및 li 태그로 사용자 지정된 드롭 다운 목록을 작성했습니다. 게재 순위는 absolute으로 설정되었습니다. 그것은 다른 장소에서 완벽하게 작동하지만 팝업에이 구성 요소를 넣을 때 드롭 다운 목록이 길면 여분의 부분은 팝업 상단이 아니라 팝업으로 덮여있을 것입니다.

z-index의 팝업이 1000인지 확인하기 위해 z-index 값을 더 많이 입력하려고 시도했습니다. lu 태그가 드롭 다운되었습니다. 그것은 아직 다루어 져 있습니다 ... 많은 경험을 가진 누군가가 나를 도울 수 있기를 바랍니다, 정말 고마워요.

var $dialog = $(".ui-res-offer-dialog"); 
$dialog.modal("show"); 

대화 상자 클래스 .ui-res-offer-dialog와 <div></div>이며, <div> 내부의 입력 필드가있다. 아래 코드는 드롭 다운 목록을 생성합니다. $ elem은 입력 필드를 클릭 할 때 변경되는 전역 변수입니다. 다음은

function displayFieldOptions(list) { 
     if($elem != null) { 
      var currentValue = $elem.val().toUpperCase(); 
      if("" != currentValue) { 
       var optionsHtml = '<ul class="field-options-container">'; 
       var optionsSize = 0; 

       $.each(list, function(index, value) { 
        // If the value contains the user input, and the option size is under 10, add this option 
        if(value.toUpperCase().indexOf(currentValue) >= 0 && optionsSize < 10) { 
         optionsHtml += '<li class="field-options" onclick="setFieldValue(this)">' + value + '</li>'; 
         optionsSize++; 
        } 
       }); 
       optionsHtml += "</ul>"; 
       $(".field-options-container").remove(); 
       var $optionsHtml = $(optionsHtml); 
       $optionsHtml.css("width",$elem.css("width")); 
       // If the input box is focused and it has options inside, display it 
       if($elem.is(":focus") && optionsHtml.indexOf("setFieldValue") > 0) { 
        $elem.after($optionsHtml); 
       } 
      } else { 
       $(".field-options-container").remove(); 
      } 
     } 
    } 

이 모달 플러그인

<div class="ui-res-offer-dialog modal ui-res-offer-dialog-active in" role="dialog" aria-labelledby="basicModal" aria-hidden="false" data-backdrop="static" style="display: block;"> 
    <div class="ui-res-offer-dialog-container"> 
     <!-- some input fields here, too long I can't paste all of them --> 
    </div> 
</div> 

이에 의해 생성 된 대화 상자가 대화 태그의 CSS가된다

.field-options-container { 
    z-index: 3000; 
    border: 1px solid #485c87; 
    background: #ffffff 50% bottom repeat-x; 
    color: #222222; 
    position: absolute; 
} 

UL 인증 태그의 CSS 코드입니다

.modal { 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1050; 
    outline: 0; 
    height: 1000px; 
} 
.ui-res-offer-dialog-container { 
    background: white; 
    border-radius: 5px; 
    box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.85); 
    display: inline-block; 
    height: auto; 
    margin-top: 10%; 
    left: 40%; 
    overflow: hidden; 
    position: relative; 
    width: 380px; 
    color: black; 
} 

.ui-res-offer-dialog-con 용 tainer, 심지어 자동에서 정적 값으로 높이를 변경, 드롭 다운 목록은 여전히 ​​적용됩니다.

Answer 1

목록이 아닌 전체 대화 상자의 overflow이 hidden으로 설정되어 있지 않아야 정상적으로 확장되는 내용이 숨겨지고 대화 상자의 정적 높이가 표시되지 않도록 할 수 있습니다 세트 (이것은 아마도 더 있음). 어느 경우이든 높은 z-index은 충분하지 않습니다.

** 'lu'가 아닌 'ul'을 의미하는 것으로 추정됩니까?