DatePicker и другие всплывающие окна, скрытые за модальное всплывающее окно - PullRequest
Новая
       11

DatePicker и другие всплывающие окна, скрытые за модальное всплывающее окно

2 голосов
/ 20 января 2012

У меня есть модальное окно jquery, которое я вызываю вот так 

function showDialog(clickid,reportid) {
         var clickid=clickid;
         var reportid=reportid;
            reportFilterDialog= $("#reportFilterDialog").modal({
              autoOpen: false,
              draggable: true,
              resizable: true,
              height: 220,
              width: 420,
              zIndex: 1001,
              //modal: true,
              title: 'Populate Report Parameters'

   });

В этом модале у меня срабатывает указатель даты при нажатии кнопки .. вот так 

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

где from_date - идентификатор поля ввода.

Я все еще вижу, что указатель даты появляется за модальным всплывающим окном. Я установил z-индекс DatePicker выше, чем модальный, но он не работает. Я также установил .ui-datepicker z-index на 9999 в DatePicker css и jquery css, который имел свойство.
Также любое другое всплывающее окно, вызываемое из модального всплывающего окна, загружается за модальным. Как мне исправить эту проблему?

Ответы [ 2 ]

7 голосов
/ 21 января 2012

Могу поспорить, что это связано только со значением z-index. У меня была похожая проблема и следующее изменение в jquery ui css, и оно работало для меня в модальном режиме (обратите внимание на z-index: 2000! Важно - важно было, иначе z-index переопределялся): 

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 2000 !important;}
1 голос
/ 06 февраля 2016

Я тоже однажды сталкивался с подобной проблемой.Установка z-index не сработала.Я пытался с приведенным ниже кодом.

$("#IDofTimePicker").timepicker({
        template: "modal",
        format: 'HH:mm'
    });

Установка шаблона как "модального" работала для меняНадеюсь, это кому-нибудь поможет.

...