jQuery datepicker 出现在弹出窗口后面答案

【问题标题】：jQuery datepicker shows up behind popupjQuery datepicker 出现在弹出窗口后面
【发布时间】：2010-08-17 12:11:09
【问题描述】：

我正在使用两个不同的 jQuery 插件，我正在尝试组合它们。首先，我使用来自http://fancybox.net/home 的弹出插件。当弹出窗口显示时，我需要在弹出窗口中有一个带有日期选择器的文本字段。日期选择器来自 jQuery UI。问题是日期选择器总是显示在弹出窗口的后面，因此无法选择日期。这是我可以通过某种方式改变的吗？

我的代码：

<html>
    <a id="inline" href="#data">Open popup</a>

    <div style="display:none"><div id="data">
        <input id="datepicker" type="text">
    </div></div>
</html>

<script type="text/javascript">
    $(document).ready(function() {
        $("a#inline").fancybox();
        $("#datepicker").datepicker();
    });
</script>

【问题讨论】：

你使用的fancybox版本的z-index是多少，你能检查一下CSS吗？

标签： jquery jquery-ui datepicker fancybox

【解决方案1】：

您需要将 datepicker 的 z-index 设置为高于 fancybox 的 z-index。 fancybox z-index 是 1101，只需将 datepicker 设置为 1102 或更高的值，它应该会将 datepicker 放在前面。

【讨论】：

支持提及 fancybox 使用的 z-index。这是其他解释中缺乏的一个关键细节，这让我觉得“嗯——一千个应该够了”。

【解决方案2】：

使用 CSS - .datepicker{ z-index: 999999; }

【讨论】：

【解决方案3】：

.fancybox-inner{overflow:visible !important;}

这对我有用

【讨论】：