Задача z-index для выбора даты JQuery

У меня есть div слайд-шоу, и у меня есть поле datepicker над этим div.

Когда я нажимаю в поле datepicker, панель datepicker показывает позади слайд-шоу div.

И я положил script как:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Поэтому я не могу изменить z-index datepicker в CSS. Z-index datepicker, который генерирует script, равен 1, а мой slideshow div (также вызывающий th go goajajapapi) z-index равен 5. Поэтому я предполагаю, что мне нужно увеличить z-индекс выбора даты больше 5. So есть ли способ его увеличить?

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

Ответы

Ответ 1

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

Дилер datepicker принимает z-индекс от входа, но это работает только в том случае, если позиция относительна.

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

Ответ 2

просто в вашем css use '.ui-datepicker{ z-index: 9999 !important;}' Здесь 9999 можно заменить на любое значение уровня, которое вы хотите, чтобы ваш датпикер был доступен. Ни один код не должен быть комментирован, а добавление 'position:relative;' css на входных элементах. Поскольку увеличение z-индекса входных элементов будет влиять на все кнопки типа ввода, которые могут не понадобиться для некоторых случаев.

Ответ 3

работал у меня

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Ответ 4

Основанный на ответе marksyzm, это сработало для меня:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Ответ 5

Добавляя к Джастину ответ, если вас беспокоит неопрятная разметка или вы не хотите, чтобы это значение было жестко закодировано в CSS, вы можете установить ввод до его показа. Что-то вроде этого:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Обратите внимание: вы не можете опустить правило "position": "relative", так как плагин либо смотрит в встроенный стиль для обоих правил, либо в таблицу стилей, но не обе.

dialog("widget") - это фактическая датапикер, которая появляется.

Ответ 6

У меня была проблема, которую я решил использовать при нажатии:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Ответ 8

У меня есть страница, где datepicker был поверх кнопки datatables.net tabletools. Кнопки datatables имели более высокий индекс z, чем отдельные кнопки даты datepicker. Благодаря ответу Ронье я смог решить эту проблему, используя позицию: relative; и z-индекс: 10000. Спасибо!

Ответ 9

Это случилось со мной, когда я пропустил тему. Убедитесь, что тема существует, или, возможно, обновите тему и повторно загрузите ее на свой сервер.

Ответ 10

Что решило мою проблему:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

Ответ 11

У меня тоже была эта проблема, так как datepicker использует входной z-index, я добавил следующий css

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Просто примените правило, применимое к вашему, либо родительским id, либо классом, либо в моем случае диалогом начальной загрузки, используя их группу ввода и управление формой.

Ответ 12

Фактически вы можете эффективно добавить в свой css .ui-datepicker{ z-index: 9999 !important;}, но вы можете изменить jquery-ui.css или jquery-ui.min.css и добавить в конце класса ui-datepicker z-index: 9999 !important;. обе вещи работают для меня (вам нужен только один, -))

Ответ 13

Мне пришлось

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}