Проблема с плагинами jQuery Dialog и Datepicker

У меня есть диалоговое окно, и у меня есть поле datepicker в диалоговом окне.

когда я открываю диалоговое окно и нажимаю в поле datepicker, панель datepicker отображается за диалоговым окном.

Я пробую больше свойств: zindex, stack, bgiframe, но не успех.

кто может мне помочь?

Tks.

12 53
jquery jquery-ui-dialog

12 ответов:

Ответ

z-index (обратите внимание на дефис!)- это свойство, которое имеет значение. Убедитесь, что вы установили его больше, чем диалог, и убедитесь, что вы установили его на правильный элемент. Вот как мы это делаем:

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

изменение API-17 апреля 2010

в файле CSS для выбора даты найдите .ui-datepicker пункт и изменить его:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

используя Z-индекс: 9999 !важно; работал в Firefox 3.5.9 (Kubuntu).

78

для jquery-ui-1.8

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

важно необходимо, так как datepicker имеет элемент.стиль, который устанавливает z-индекс в 1.

17

это сработало для меня:

.ui-datepicker {
        z-index: 9999 !important;
    }
6

поместите следующий стиль в текстовый элемент 'input':"position: relative; z-index: 100000;".

datepicker div принимает Z-индекс от входного сигнала, но это работает только если положение относительно.

используя этот способ, вам не нужно изменять javascript из пользовательского интерфейса jQuery.

2

в качестве пользовательского интерфейса пользовательский интерфейс-элемент управления datepicker-div в версии 1.7.2 уже не действительный элемент CSS. "ui-datepicker", похоже, является самой внешней оболочкой, и установка Z-индекса на 99999 работает правильно для меня, насколько я знаю

1

для jquery-ui-1.7.2

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>
1

установите это в верхней части страницы. Он будет работать нормально:

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
1

Я получил его работу, позвонив

$("#ui-datepicker-div").css("z-index", "1003" );
1

Я в шоке, что:

a) здесь никто не упоминал о программном решении для установки Z-индекса datepicker b) для jQuery DatePicker нет возможности передать Z-индекс при привязке его к элементу.

Я использую метод js для вычисления самого высокого индекса. Мы по умолчанию проверяем только divs, потому что это вероятные элементы для получения значения z-индекса и, по понятным причинам, быстрее, чем разбор каждого элемента на страница.

/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
    var index_highest = 0;
    var index_current;
    if(element == undefined){
        element = 'div';
    }
    $(element).each(function(){
        index_current = parseInt($(this).css("z-index"), 10);
        if(index_current > index_highest) {
            index_highest = index_current;
        }
    });
    return index_highest;
}

потому что мы должны использовать javascript для привязки datepicker к элементу, т. е. $('#some_element').datepicker (), в это время мы устанавливаем стиль целевого элемента так, чтобы datepicker забирал из него Z-индекс. Спасибо Ronye Vernaes (в своем ответе на этой странице) за указание на то, что datepicker () подберет z-индекс целевого элемента, если он имеет один и установлен в положение: relative:

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

этого.цель-это элемент ввода, который мы делаем в поле datepicker. Во время привязки мы получаем самый высокий Z-индекс на странице и делаем z-индекс элемента выше. Когда значок datepicker нажат, он заберет этот Z-индекс из элемента ввода, потому что, как упоминал Ронье Вернес, положение стиля: относительное.

в этом решении мы не пытаемся угадать, какое самое высокое значение Z-индекса будет. Мы на самом деле получаем его.

1

диалог отображается в iframe и отображается поверх всего остального (включая выпадающие списки). Между тем datepicker отображается в обычном HTML и позиционируется абсолютно.

похоже, что datepicker отображается абсолютно относительно родительской страницы вместо iframe. Вы пробовали разместить календарь внутри диалогового окна как обычный, не абсолютный блог? Или вы можете использовать выпадающие списки вместо этого.

0

решение для jQuery datepicker 1.8.3 версии, чтобы изменить значение z-индекса, это не невозможно изменить с помощью css.

этот отлично работает:

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });
0

datepicker теперь устанавливает всплывающий z-индекс на один больше, чем связанное с ним поле, чтобы держать его перед этим полем, даже если это поле само по себе находится во всплывающем диалоговом окне. По умолчанию Z-индекс равен 0, поэтому datepicker заканчивается на 1. Есть ли случай, когда это не показывает datepicker правильно? Сообщение На Форуме JQuery

чтобы получить Z-индекс 100. Вам нужен вход с z-index:99; и JQueryUI обновит datepicker, чтобы быть z-index:100

<input style="z-index:99;"> или <input class="high-z-index"> и css .high-z-index { z-index: 99; }

вы также можете указать Z-индекс для наследования, который должен наследовать от вашего диалогового окна и заставить jQueryUI правильно определить Z-индекс.

<input style="z-index:inherit;"> или <input class="inhert-z-index"> и css .inherit-z-index { z-index: inherit; }

0