всплывающее окно datetimepicker скрывается за диалоговым окном контейнера - PullRequest
1 голос
/ 26 января 2012

Я использую этот инструмент выбора для своих проектов, и мне нужно изменить значение индекса z этого средства выбора, поскольку оно появляется за модальным окном, и я хочу увеличить индекс z средства выбора даты и времени. В настоящее время я добавил свойство zIndex в определение средства выбора времени, например:

jQuery(function() {
                       jQuery( "#from_date" ).datetimepicker({ dateFormat: 'yy-mm-dd',
                           showOn: "button",
                           zIndex:9999,
                            buttonImage: "/gra/images/icons/fugue/calendar-month.png",
                           buttonImageOnly: true });
               });

, который выше, чем индекс z всплывающего диалога, внутри которого расположена кнопка выбора даты, но она не идет сверху. В каких еще местах в стиле css мне нужно установить значение индекса z отдельно от определения?

Обновление : Я использовал Firebug и выяснил причину, но не решение. Z-индекс диалогового окна - 1001, который я знаю, поскольку я установил это в CSS. Но значение z-index средства выбора даты равно 91, и я попытался найти класс ui-datepicker-div, но не могу найти ни одного класса, который имеет значение z-index 91 прямо сейчас, был класс #search с zindex как 91, и я изменил его на 9999 (думая, что тот наследует), но он все равно снова показывает значение 91 в firebug .. ?? Классы, связанные с html-компонентом datepicker:

<div id="" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ... z-index=91....>
<html for date picker>
</div>

1 Ответ

0 голосов
/ 26 января 2012

Вот большая проблема с zIndices.

<div style='position:relative'id="global-container">
    <div style='position:relative;z-index:1'id="container-1">
        <div style='position:relative;z-index:50'id="content-1"> content 1 </div>
    </div>
    <div style='position:relative;z-index:2'id="container-2">
        <div style='position:relative;z-index:2'id="content-2"> content 2 </div>
    </div>
</div>

Вы можете предположить, что #content-2 появится ниже #content-1, но проблема в том, что z-индексы сравниваются в своих относительных контейнерах.Таким образом, учитываются z-индексы #container-1 и #container-2.Я бы предложил слой только для всплывающих окон.Что-то с невероятно высоким z-индексом, который находится внутри глобального контейнера.Независимо от того, что тогда он будет переопределять.

Теперь в ie7, насколько я могу судить, это просто тот, кто имеет самый высокий z-индекс, но в современных браузерах это зависит от всей цепочки, следовательно, необходим уровень пользовательского интерфейсадля всплывающих окон.

iframes Youtube будут доминировать над любыми всплывающими окнами z-index, по крайней мере, я не могу понять, как обойти это ... пока.

...