移动混合应用程序覆盖问题

【问题标题】：Mobile hybrid app overlay issue移动混合应用程序覆盖问题
【发布时间】：2013-12-27 18:02:59
【问题描述】：

我们在混合移动应用程序中的页面上的叠加层存在问题。我们在页面上有几个相对位置的按钮，单击按钮覆盖掩码会显示一个日期选择器，该选择器具有固定的位置。

问题是当我们用日期选择器选择日期并点击设置按钮设置日期时，页面后面的按钮也会触发点击事件。

我们为叠加层赋予了更高的 z-index。同样的事情适用于桌面浏览器，但不适用于移动设备。

感谢任何帮助。

更新： Worklight 版本 5.0.6.1 设备 Android 4.0.4 - 索尼 xperia 它不是在“浏览器”上运行，而是在浏览器外壳（worklight 混合应用程序）中

【问题讨论】：

你在使用任何框架吗？你能制作一个测试用例应用程序吗？
正在使用 jQuery 框架。通常我们使用mobiscroll plugin 作为日期选择器。

标签： html css ibm-mobilefirst hybrid-mobile-app

【解决方案1】：

日期框是另一个元素的子元素吗？在这种情况下，这些按钮将永远无法用于 Android Xperia 浏览器。您应该将日期框直接放在<body> 元素中（这样日期框元素的父级为<body>），它会起作用。

我猜你的日期框是这样放置的：

<body>
    <div>
        <div>
            <div id='datebox'>
                <table style='position:fixed;...'>Your date box...</table>
            </div>
            ...
        </div>
    </div>
</body>

您应该移动日期框，以便 <body> 元素成为其父元素，如下所示：

<body>
    <div>
        <div>
            ...
        </div>
    </div>
    <div id='datebox' style='position:fixed;'>
        <table style='...'>Your date box...</table>
    </div>
</body>

【讨论】：

@hnDabhi 对了，最近我遇到了和你一模一样的情况，刚刚想出了这个解决办法。