logo标签列表

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。是否有任何方法可以增加它？

有人能帮助我吗？

这里是解决方案 https://dev59.com/1Ggu5IYBdhLWcg3wJT9I - NoWar
15个回答
1
事实上，您可以有效地在您的CSS中添加 .ui-datepicker{ z-index: 9999 !important;}，但是您也可以修改jquery-ui.css或jquery-ui.min.css，并在ui-datepicker类的末尾添加z-index: 9999 !important;。这两个方法对我都可以奏效（您只需要选择其中一个;-)）。
1
我有一个页面，其中日期选择器位于datatables.net表格工具按钮的顶部。 datatables按钮的z-index比单独的日期选择器日期按钮高。 感谢Ronye的答案，我能够通过使用position: relative;和z-index: 10000来解决这个问题。 谢谢！
1

这种情况发生在我忘记主题的时候。请确保主题存在，或者重新下载主题并将其重新上传到您的服务器。

0
30次尝试 最后我搞定了。工作中。 

.modal {
    z-index: 1040; // Bootstrap 3 Model
}
.ui-datepicker {
    z-index: 1041 !important;
}

0

我也遇到了这个问题，因为日期选择器使用了输入框的 z-index，所以我添加了以下 CSS

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

只需使用适用于您的规则，可以是按父级ID、类别或者像我的情况一样，使用其input-group和form-control。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接