Получить календарь Jquery UI, чтобы показать в верхней части модального всплывающего окна - PullRequest
Новая
       15

Получить календарь Jquery UI, чтобы показать в верхней части модального всплывающего окна

2 голосов
/ 09 октября 2009

Привет, у меня есть модальное всплывающее окно JQuery, в которое я загружаю HTML. У меня есть следующий код в моем файле scrpt: 

  //date code - move to reusable.
    $('.dateDavy').datepicker({
        showOn: 'button',
        buttonImage: '/Content/images/Control_MonthCalendar.bmp',
        buttonText: 'Enter Date',
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        yearRange: '-115:+3',
        changeMonth: true,
        changeYear: true            
    });

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

Любая помощь приветствуется

1 Ответ

3 голосов
/ 09 октября 2009

Добавьте немного CSS в файл CSS, который загружается после CSS пользовательского интерфейса jQuery, который устанавливает для класса ui-datepicker значение z-index выше, чем в модальном диалоговом окне. Я не помню, что это у меня на макушке, поэтому можно немного поэкспериментировать. Вы также можете добавить и удалить z-index во время обратного вызова для события открытия диалога в DIV ui-datepicker-div, если вам нужно, чтобы указатель даты находился над диалоговым окном только тогда, когда он отображается, и в противном случае он имел нормальный z-индекс. 

.ui-datepicker
{
   z-index: 32767;
}

$('selector').dialog({
     open: function(event,ui) {
          $('#ui-datepicker-div').css('z-index',32767);
     },
     close: function(event,ui) {
          $('#ui-datepicker-div').css('z-index',null);
     }
});
...