Question

我正在尝试显示包含jQuery UI datepicker控件的qTip（与jQuery UI捆绑在一起的版本）。但是，日期选择器的日历会在qTip后面打开。我尝试从firebug手动设置日历的z顺序，这允许日历在qTip前面打开。但是，在这种情况下，单击日历会产生关闭qTip的效果，因为（我假设）它是页面内容的一部分。

我仍在努力解决这个问题，但是想问一下 - 有没有人遇到过这个问题？任何可能的解决方法，以使datepicker工作？

Answer 1

而不是使用QTip（设计工作类似于工具提示，设计为消失），也许您应该使用JQuery Dialog控件。

或者，您可以在程式化的div上使用JQuery UI Position库（这应该是QTip正在使用的）。

Answer 2

您必须将jQuery UI Datepicker的z-index更改为显示在qTip前面。

要解决“点击日期选择器和qTip关闭”的问题，您需要配置qTip以关闭“mouseout”。日期选择器位于qTip内部，所以一旦你超过qTip气泡，你可以在没有“鼠标移除”qTip内容的情况下与内部的内容进行交互（在这种情况下点击日期）。

无论如何，这是我使用的qTip配置JS，“hide”部分也是你想要关注的部分。

    $(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'
          }}       
    });
});

qTip上的jQuery UI Datepicker

2 个答案: