z-index не работает во всплывающем окне

Question

У меня проблема с выпадающим списком внутри модального всплывающего окна JQuery.

Я написал индивидуальный выпадающий список с lu и li тегами. Положение было установлено на absolute. Он отлично работает в другом месте, но когда я помещаю этот компонент во всплывающее окно, и когда выпадающий список длинный, дополнительная часть будет покрыта всплывающим окном, а не поверх всплывающего окна.

Я проверяю z-index для всплывающего окна 1000, я попытался поставить гораздо больше больших чисел z-index значение для выпадающего списка lu. Это все еще покрыто ... Надеюсь, что кто-то, у кого есть много опыта, может помочь мне, большое вам спасибо.

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

Диалог является <div></div> с классом .ui-res-offer-dialog, и есть некоторые поля ввода внутри <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(); 
      } 
     } 
    } 

Ниже CSS код уль тега

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

Это диалоговое окно генерируется модальной плагин

<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 диалоговые тегов

.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-диалог-con tainer, даже я меняю высоту с авто на статическое значение, раскрывающийся список все еще покрыт.

Answer 1

Возможно, вы захотите убедиться, что overflow общего диалогового окна (а не списка) не установлен на hidden, что скроет все, что обычно будет расширяться из него, а статическая высота (в диалоговом окне) не будет (вероятно, это скорее). Высокого z-index будет недостаточно, если это так.

** Предполагаю, вы имеете в виду 'ul' not 'lu'?