jQuery UI Datepicker на qTip

Question

Я пытаюсь отобразить qTip, содержащий элемент управления датой jQuery UI (версия, в комплекте с пользовательским интерфейсом jQuery). Однако календарь qpip раскроет календарь датпикера. Я попытался вручную установить z-порядок в календаре из firebug, что позволяет календарю открываться перед qTip. Однако в этом случае нажатие на календарь имеет эффект закрытия qTip как (я полагаю), это часть содержимого страницы.

Я все еще работаю над этим, но хотел спросить - кто-нибудь сталкивался с этой проблемой раньше? Какие-нибудь возможные обходные пути для работы datepicker?

Answer 1

Вместо использования QTip (который предназначен для работы как всплывающая подсказка, предназначен для устранения), возможно, вам следует использовать JQuery Dialog.

Или вы могли бы использовать библиотеку JQuery UI Position на стилизованном div (что должно быть тем, что QTip использует в любом случае).

Answer 2

Вам нужно изменить z-индекс jQuery UI Datepicker, чтобы появиться перед qTip.

Чтобы решить вашу проблему «щелкнуть по кнопке datepicker и qTip close», вам необходимо настроить qTip, чтобы закрыть «mouseout». Datepicker находится внутри qTip, поэтому, как только вы переходите через пузырь qTip, вы можете взаимодействовать (в этом случае нажмите кнопку «Даты») с содержимым внутри, если вы не «вытаскиваете» содержимое qTip.

Как бы то ни было, вот моя конфигурация qTip JS, которую я использовал, раздел «скрыть» - это та часть, на которую вы также должны обратить внимание.

$(document).ready(function() 
{ 
    $("img.calendarIcon-calendarView").qtip({ 

     content: { 
      url: 'ajaxContent/caledarInclude.html' 
      }, 

     style: { 
      name: 'dark', 
      tip: 'topMiddle', 
      width: { max: 1000 }, 
      border: {radius: 6, width: 4} 
       }, 

     show: { 
      effect: { 
       type: 'slide', 
       length: 300 
       } 
      }, 

     hide: { 
      when: 'mouseout', 
      fixed: true, 
      delay: 750, 
      effect: { 
       type: 'slide', 
       length: 300 
       } 
      }, 

     position: { 
      corner: { 
      target: 'bottomMiddle', 
      tooltip: 'topMiddle' 
      }}  
    }); 
});