Jquery DatePicker 出现在其他常规页面元素后面

Posted 2023-05-07

【中文标题】Jquery DatePicker 出现在其他常规页面元素后面

【英文标题】：Jquery DatePicker shows up behind other regular page elements

【发布时间】：2014-04-26 03:16:32

【问题描述】：

我在使用其他人实现的日期选择器时遇到问题。我试图在我的网站上实现代码，但它不起作用。下面是 javascript DatePicker

// init datepicker
function initDatepicker()
    jQuery('.with-datepicker').each(function()
        var hold = jQuery(this);
        var input = hold.find('input:text');
        var opener = hold.find('.btn');
        input.datepicker(
            showOtherMonths: true
        )
        opener.bind('click', function(e)
            input.focus();
            e.preventDefault();
        )
    )

所以我的问题是 2 倍。 A) 除了在jQuery(this).find('input:text').focus();上调用焦点之外，我不明白 input.focus() 真正在做什么 B) 具有“.with-datepicker”类的日期选择器显示在页面上其他元素的后面，当我尝试单击日期选择器时它会消失并且不选择日期。

要给您的更多信息是，我将它与 Contact Form 7 一起使用，它有一个文本框，您可以单击以激活日期选择器。那部分似乎工作正常。日期选择器字面上显示在显示“选择日期”的输入框下方。问题是 datepicker 类位于单选按钮等其他元素的后面。

在input.focus();之后我也尝试过这样做

$(this).parent().css('position', 'relative');
$(this).parent().css('z-index', 3000);

下面是它在页面上的外观链接：

【参考方案1】：

确保您的 DatePicker 具有 position: absolute;

包装器应该有position: relative;， 它的其他子元素不应有relative 定位。

您的问题在于找到正确的父级，并将正确的z-index 提供给 Active DatePicker。

【讨论】：

选择块是什么意思？

我的意思是你必须点击标签才能显示 DatePicker。例如这里的Event Date 1st Choice 按钮。 每对这样的按钮和日期选择器应该有一个父项。 或者您可以将 Datepicker(position: absolute;) 放在带有position: relative; 的“按钮”块内，它会解决您的问题。

【参考方案2】：

我只用 css 解决了这个问题

.ui-datepicker  z-index: 10000 !important; 

【参考方案3】：

将position:absolute 赋予datepicker 元素，将position:relative 赋予datepicker 元素的父元素

【讨论】：

我刚试过这个，它对我不起作用。 $(this).parent().css('position', 'relative'); $(this).css('位置', '绝对'); $(this).css('z-index', 3000);

在样式表中应用这个。

哦，你的意思是用 CSS 而不是 jQuery 来做这个

是在CSS中添加定位