У меня есть диалог, и у меня есть поле datepicker в диалоговом окне.
Когда я открываю диалог и нажимаю в поле datepicker, панель datepicker показывает за диалогом.
Я пробую больше свойств: zindex, stack, bgiframe, но не успех.
Кто-нибудь может мне помочь?
Tks.
Старый ответ
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! important; работало в Firefox 3.5.9 (Kubuntu).
для jquery-ui-1.8
<style type="text/css">
.ui-datepicker
{
z-index: 1003 !important; /* must be > than popup editor (1002) */
}
</style>
Важно, так как datepicker имеет element.style, который устанавливает z-index в 1.
Это сработало для меня:
.ui-datepicker {
z-index: 9999 !important;
}
Поместите следующий стиль в текстовый элемент "input": "position: relative; z-index: 100000;".
Дилер datepicker принимает z-индекс от входа, но это работает только в том случае, если позиция относительна.
Используя этот способ, вам не нужно изменять какой-либо javascript из пользовательского интерфейса jQuery.
В версии UI версии 1.7.2 ui-datepicker-div больше не является допустимым элементом css. "ui-datepicker" кажется самой внешней оболочкой, и установка z-index на 99999 работает правильно для меня, насколько я знаю.
для jquery-ui-1.7.2
<style type="text/css">
.ui-datepicker
{
z-index: 1003; /* must be > than popup editor (1002) */
}
</style>
Установите это в верхней части страницы. Он будет работать нормально:
<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
Я получил его, позвонив
$("#ui-datepicker-div").css("z-index", "1003" );
Я в шоке от того, что:
a) никто здесь не упомянул о программном решении по настройке datepicker z-Index b) нет возможности для jQuery DatePicker передавать z-индекс при привязке его к элементу.
Я использую метод js для вычисления самого высокого индекса. Мы по умолчанию проверяем только divs, потому что это вероятные элементы для получения значения 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 для привязки datepicker к элементу, то есть $('# some_element'). datepicker(), в то время мы устанавливаем стиль целевого элемента, чтобы datepicker забирал z-index из Это. Благодаря Ronye Vernaes (в его ответе на этой странице), указав, что datepicker() будет отображать целевой элемент z-Index, если он имеет один и установлен в позицию: relative:
$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);
this.target - это элемент ввода, который мы вводим в поле datepicker. Во время привязки мы получаем самый высокий z-индекс на странице и делаем элемент z-index более высоким. Когда щелкнет значок даты, он подберет этот z-индекс из входного элемента, потому что, как сказал Ронье Вернас, позиция стиля: относительная.
В этом решении мы не пытаемся угадать, каким будет наивысшее значение z-Index. Мы действительно ПОЛУЧИТЕ ЭТО.
Диалог отображается в iframe и отображается поверх всего остального (включая выпадающие списки). Между тем datepicker отображается в нормальном HTML и позиционируется абсолютно.
Похоже, что datepicker отображается абсолютно относительно родительской страницы вместо iframe. Пробовали ли вы поместить календарь в диалоговом окне как стандартный, не абсолютный блог? Или вы можете использовать выпадающие меню вместо этого.
Решение для jquery datepicker версии 1.8.3, чтобы изменить значение z-index, с помощью css изменить невозможно.
Это хорошо работает:
jQuery('.ui-datepicker-trigger').click(function() {
setTimeout(function() {
jQuery('#ui-datepicker-div').css('z-index', 999);
}, 500)
});
Datepicker теперь устанавливает popup z-index на одно больше, чем связанное с ним поле, чтобы держать его перед этим полем, даже если это поле само по себе во всплывающем диалоговом окне. По умолчанию z-index равен 0, поэтому datepicker заканчивается 1. Есть ли случай, когда это неправильно отображает датупиксера? Сообщение JQuery Forum
Чтобы получить 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-index для наследования, который должен наследовать из вашего диалогового окна, и заставить jQueryUI правильно определить z-index.
<input style="z-index:inherit;"> или <input class="inhert-z-index"> и css .inherit-z-index { z-index: inherit; }