Question

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

我的代码：

<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>

Answer 1

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

Answer 2

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

Answer 3

.fancybox-inner {overflow：visible！important;}

这对我有用

jQuery datepicker出现在弹出窗口后面

3 个答案: