Question

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

问题是在jQM模式下显示的datepicker模式因此用户无法看到它，我希望datepicker显示在jQM模式的顶部。如果我使用Firebug隐藏jQM模式，我还可以看到日期选择器位于jQM“暗”过滤器下 - 除了jQM模式之外，它使一切变暗。

我用来设置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模式设置为较低z-index，同时尝试强制它与!important但这并没有改变任何东西。其他Mobiscroll显示选项：top，bottom，bubble也有同样的问题。

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

jQM版本：1.2.0（最新版），带有jQuery 1.8.2 Mobiscroll版本：2.4.4（最新）

Answer 1

试试这个：

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

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

中

Answer 2

我碰巧有同样的问题，在这里我的修复：检查模态的css（jquery mobile modal的默认z-index是1050）。然后转到mobicroller css并将z-index更改为高于它的任何值。只要mobiscroller有一个hinger z-index，它应该显示在顶级模态上没有任何问题。

Mobiscroll datepicker被jQuery Mobile模式隐藏

2 个答案: