Mobiscroll datepicker 被 jQuery Mobile 模态隐藏

Posted 2023-05-08

【中文标题】Mobiscroll datepicker 被 jQuery Mobile 模态隐藏

【英文标题】：Mobiscroll datepicker is hidden by jQuery Mobile modal

【发布时间】：2013-02-08 08:15:29

【问题描述】：

我有一个带有一些日期输入的 jQuery Mobile 网站，我使用 Mobiscroll datepicker（在模式模式下）来处理这些。它在标准 jQM 页面上运行良好，但是当我在 jQM 模式上输入日期时会出现问题。

问题是日期选择器模式显示在 jQM 模式下，因此用户看不到它，我希望日期选择器显示在 jQM 模式的顶部。如果我使用 Firebug 隐藏 jQM 模态，我还可以看到 datepicker 在 jQM“dark”过滤器下 - 它使除 jQM modal 之外的所有内容都变暗。

我用来设置 Mobiscroll 日期选择器的代码是：

$('#mydate').scroller('destroy').scroller($.extend(

    preset : 'date',
    dateFormat: 'dd/mm/yyyy'
,

    display: 'modal',
    mode: 'scroller',
    theme: 'default',
    lang: 'en'
));

我尝试修改 Firebug 中的元素以查看是否有一些 CSS 可以修复它，我尝试将 datepicker 设置为高 z-index 并将 jQM modal 设置为较低 z-index，还尝试使用 !important 强制它但这并没有改变任何东西。其他 Mobiscroll 显示选项：顶部、底部、气泡也有同样的问题。

如何让日期选择器显示在 jQM 模式之上？

jQM 版本：1.2.0（最新），带有 jQ​​uery 1.8.2 Mobiscroll 版本：2.4.4（最新）

【问题讨论】：

我得到了iPhone 4的演示页面源代码，希望对你有所帮助。回家后我会检查代码。 pastebin.com/skWAE9ff

【参考方案1】：

试试这个：

.dw-persp, .dwo z-index:1051;
.dw z-index:1051;

你最好把它放在最后一个css中

【参考方案2】：

我碰巧遇到了同样的问题，这里是我的解决方法： 检查模态的 css（jquery 移动模态的默认 z-index 为 1050）。 然后转到 mobicroller css 并将 z-index 更改为高于它的任何值。只要 mobiscroller 有一个铰链 z-index，它就应该毫无问题地显示在顶部模态中。