Как заставить jQuery UI Selectmenu появляться над (то есть перед) модальным окном jQuery? - PullRequest
Новая
       1

Как заставить jQuery UI Selectmenu появляться над (то есть перед) модальным окном jQuery?

0 голосов
/ 10 октября 2011

Я использую jQuery UI Selectmenu для стилизации выпадающих форм.Я создал пример страницы формы, чтобы вы могли точно узнать, что именно я собираюсь спросить:

Тестовая страница: jQuery UI Selectmenu

Как вы увидите на странице, на которую вы попали после нажатия на приведенную выше примерную ссылку, все отлично работает с выпадающими меню jQuery UI Selectmenu главной страницы (поля: «Page Dropdown 1» и «Page Dropdown 2»).У меня проблема в том, что я не могу правильно отобразить выпадающие меню в модальном окне на странице.

Пожалуйста, нажмите кнопку "Поиск" на приведенной выше странице, чтобы перейти к примеру модального окна.

Ошибка в том, что выпадающие списки модального окна (поля: «Модальное выпадающее меню 1» и «Модальное выпадающее меню 2») появляются за модальным окном.Вы можете видеть, что их нижняя часть появляется под нижним краем модального окна, когда вы нажимаете на выпадающий список.Итак, мой вопрос:

Как заставить jQuery UI Selectmenu появляться внутри (т.е. впереди ) модального окна jQuery, а не позади it?

Я использую FancyBox , чтобы создать модальное окно со следующим кодом: 

<a id="terminateEmployee_01" href="#terminateEmployeeShortcut">
<img src="/search/img/buttons/search_out.gif" width="200" height="34" class="rollover">
</a>

Вот код, который определяет стили выпадающего окна модального окна: 

<script type="text/javascript">
<!--
$(document).ready(function() {
// Dropdown Width Definitions
$('select#modalDD01').selectmenu({
    style:'dropdown',
    width: 200,
    maxHeight: 238
});

$('select#modalDD02').selectmenu({
    style:'dropdown',
    width: 200,
    maxHeight: 238
});
});
// -->
</script>

А вот код, который создает DIV, в котором находится модальное окно: 

<div style="display: none;">
<div id="terminateEmployeeShortcut" style="width:470px;height:165px;overflow:auto;">
<table width="460" cellspacing="0"> 
<tr>
<td class="bodyLabel" width="220">Modal Dropdown 1</td>
<td width="20"></td>
<td class="bodyLabel" width="220">Modal Dropdown 2</td>
</tr>

<tr>
<td width="220">
    <fieldset>
    <select name="modalDD01" id="modalDD01" tabindex="20" />
    <option value="" selected="">&nbsp;</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    </select>
    </fieldset>
</td>
<td width="20"></td>
<td width="220">
    <fieldset>
    <select name="modalDD02" id="modalDD02" tabindex="20" />
    <option value="" selected="">&nbsp;</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    </select>
    </fieldset>
</td>
</tr>
</table>

<br clear="left"><img src="/search/img/misc/spacer.gif" height="26" width="32"><br clear="left">
<a href="javascript:void(0);"><img src="/search/img/buttons/save_pop_out.gif" width="200" height="34" class="rollover"></a></center>

</div>
</div>

Опять же, возможно, наиболее полезно увидеть его в действии:

Тестовая страница: jQuery UI Selectmenu

Возможно, я смогу добавить к нему что-нибудь, что заставит его появиться поверх всего остального на странице?

Пожалуйста, дайте мнезнаю, что еще я могу оказать за помощь.Заранее большое спасибо!

1 Ответ

1 голос
/ 10 октября 2011

Я проверил ваши коды из firebug, и вам нужно изменить атрибут вашего ul, который имеет id 'modalDD01-menu' и 'modalDD02-menu', добавьте z-index:9999 к каждому стилю этого ul

...