Проблема с плагинами jQuery Dialog и Datepicker - PullRequest
54 голосов
/ 04 апреля 2009

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

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

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

Кто-нибудь может мне помочь?

Tks.

Ответы [ 12 ]

79 голосов
/ 04 апреля 2009

Старый ответ

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-index: 9999! Важный; работает в Firefox 3.5.9 (Kubuntu).

17 голосов
/ 13 апреля 2010

для jquery-ui-1.8

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

Важное значение необходимо, поскольку средство выбора даты имеет элемент element.style, который устанавливает z-index равным 1.

6 голосов
/ 29 июня 2012

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

.ui-datepicker {
        z-index: 9999 !important;
    }
2 голосов
/ 02 января 2012

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

Datepicker div берет z-index из входных данных, но это работает, только если позиция относительна.

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

1 голос
/ 14 декабря 2012

Я в шоке, что:

а) здесь никто не упомянул о программном решении для установки указателя даты z-Index б) у jQuery DatePicker нет возможности передать z-индекс при привязке его к элементу.

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

/* 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 для привязки указателя даты к элементу, то есть $ ('# some_element'). Datepicker (), в то время мы устанавливаем стиль целевого элемента, чтобы datepicker выбирал z-index из Это. Спасибо Ronye Vernaes (в его ответе на этой странице) за то, что он указал, что datepicker () подберет z-Index целевого элемента, если он у него есть, и установлен в position :lative:

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

this.target - это элемент ввода, который мы вносим в поле datepicker. Во время привязки мы получаем самый высокий z-индекс на странице и увеличиваем z-индекс элемента. При щелчке по значку datepicker он извлекает этот z-индекс из элемента ввода, поскольку, как упоминал Рони Верне, позиции стиля: относительный.

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

1 голос
/ 04 апреля 2010

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

$("#ui-datepicker-div").css("z-index", "1003" );
1 голос
/ 14 декабря 2009

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

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
1 голос
/ 25 августа 2009

для jquery-ui-1.7.2

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>
1 голос
/ 11 июня 2009

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

0 голосов
/ 09 февраля 2015

Datepicker теперь устанавливает всплывающий z-индекс на единицу больше, чем его связанное поле, чтобы держать его перед этим полем, даже если это поле само находится во всплывающем диалоге. По умолчанию z-index равен 0, поэтому средство выбора даты заканчивается на 1. Имеется ли случай, когда он неправильно отображает средство выбора даты? JQuery Forum Post

Чтобы получить z-индекс 100. Вам нужен ввод с z-index:99;, и JQueryUI обновит указатель даты на 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; }

...