Jquery日期选择器z-index问题

Question

Jquery日期选择器z-index问题

jqueryjquery-pluginsuidatepicker

111

我有一个幻灯片div，并在该div上方放置了一个日期选择器字段。

当我点击日期选择器字段时，日期选择器面板会出现在幻灯片div的后面。

我已经将脚本放置为：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

所以我无法通过CSS更改datepicker的z-index。脚本生成的datepicker的z-index为1，我的幻灯片div（也通过googleajaxapi调用）的z-index为5。因此，我想增加datepicker的z-index大于5。是否有任何方法可以增加它？

有人能帮助我吗？

- rubyist

这里是解决方案 https://dev59.com/1Ggu5IYBdhLWcg3wJT9I - NoWar

15个回答

156

只需要在你的CSS中使用'.ui-datepicker { z-index: 9999 !important;}'。在这里，9999可以替换为您希望日期选择器可用的任何层值。不需要注释任何代码，也不需要在输入元素上添加'position:relative;' CSS。因为增加输入元素的z-index将影响所有输入类型的按钮，这可能对某些情况不需要。

- Aakash Sahai

我不得不使用 datepicker 而不是 ui-datepicker。 - M Smith

JavaScript在2016年仍然使用不连续的z-indexes、任意堆叠上下文，并且存在跨浏览器兼容性问题？ActionScript 3 FTW（十年前，直到今天仍然如此）。 - Triynko

仍然有效，已整合到WordPress网站中，只需在主题style.css中添加。 - Cruze

17

适用于我

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

- Bashmakov Evgeniy

15

根据marksyzm的答案，这对我有用：

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

- Lucas

1

但这只影响输入，而不影响日期选择器遮罩层？ - marksyzm

2

我正在使用这个例子 http://jqueryui.com/datepicker/，其中并没有使用日期选择器的图标。使用这个解决方案后，我就没有遇到其他网页组件的问题了。 - Lucas

8

我有一个使用日期选择器的对话框，它一直是隐藏的。当我调整了 z-index 时，下方表单中的字段总是显示在对话框上。

我使用了几种解决方法来解决这个问题。

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

beforeShow函数确保了当选中日期选择器时，它总是在最上层，而onClose函数则确保了字段的z-index被重置，以便它不会与稍后使用不同日期选择器打开的任何对话框重叠。

- Harry Binnendyk

2

这个解决方案很好，解决了我的问题。但是在“onClose”部分稍微编辑一下。我用$(this)代替了$('.ui-datepicker')。所以，它将把z-index:0设置给“此输入框”，而不是所有带有ui-datepicker类的输入框。 - Asuka165

5

在Justin的回答中，如果您担心标记混乱或不想在CSS中硬编码此值，则可以在显示输入之前设置输入。可以像这样：

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

请注意，您不能省略"position": "relative"规则，因为插件会在内联样式中查找这两个规则或样式表中查找，但不会同时查找。 dialog("widget")是实际弹出的日期选择器。

- marksyzm

1

这个问题应该在JqueryUI脚本中得到解决，并默认设置为防止覆盖。大多数情况下，用户不希望任何输入覆盖日历输入功能。如果需要让输入（或其他元素）覆盖日历，则应使用此类解决方案。话虽如此，@marksyzm是我认为最好的解决方案，因为只有在需要时才会应用它。 - FrankO

5

我遇到了这个问题，通过使用“on click”解决了它：

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

- Waqleh

这个解决方案对于我在弹出窗口上完美地工作。谢谢！ - miltone

2

看这里：http://forum.jquery.com/topic/z-index-1-datepicker-1-8

- Slawa

1

我不得不

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}

- iMitwe

1

那是解决了我的问题的方法：

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

- limilou

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ronye Vernaes · Accepted Answer

将以下样式放置在“input”文本元素中：position: relative; z-index: 100000;。

日期选择器div从输入框获取z-index，但这仅在位置为相对定位时才起作用。

使用此方法，您不需要修改 jQuery UI 中的任何 JavaScript 代码。