html - WP7 IE - CSS 模态弹出窗口 : Taps/Clicks go through overlay div and trigger links that should be invisible

Question

我正在制作一个针对移动设备的基于 HTML/CSS 和 jQuery 的文件管理器。其中一部分涉及使用基于 CSS= 的模式对话框进行各种文件操作(复制、删除等)。

我实现了这样的模态对话框行为:

<div id="overlay">
     <div id="modalBoxControls"><a href="#" id="modalBoxClose">[close]</a></div>
     <div id="modalBox">
          <div id="modalBoxContent"></div>
     </div>
</div>

CSS 是:

#overlay {
 position: fixed;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%;
 text-align:center;
 z-index: 1000;
 background: ([semi-transparent png]);
 display: none;
}
#modalBox {
width: 80%;
background-color: #fff;
margin: 0px auto;
opacity: 1;
}

我使用 jQuery 通过在 overlay 元素上调用 .fadeIn() 和 .fadeOut() 来显示和隐藏它。

到目前为止一切顺利 - 这在我的开发机器上的所有浏览器中都运行良好。

但是，在我的 WP7(三星 Omnia 7)上进行测试时，发生了一件相当奇怪的事情。模态对话框显示正常，它后面的页面被涂黑了。但是点击(或点击)会穿过 #overlay 并激活它后面的任何东西，即使它完全掩盖了后面的所有东西并且它的 z-index 是 1000。

我还使用 Nick Stakenburg 著名的“Lightview”插件(一段经过充分测试和改进的代码)对此进行了测试，并在 WP7 上的 IE 上发现了相同的行为。

所以看起来这可能是浏览器本身的错误。

有人知道解决这个问题的方法吗？

编辑 - 带有问题示例的 jsFiddle

因此，请在您的 WP7 设备中检查一下，看看如何在文件顶部覆盖时仍然可以单击这些文件:http://jsfiddle.net/michaelbromley/CHU76/

Answer 1

如果“激活它背后的任何东西”意味着像文本输入这样的输入控件，那么我遇到了同样的问题。老实说，我不知道一个好的解决方案。我的解决方法是在显示弹出窗口期间禁用输入控件，然后通过删除禁用属性将它们重新激活。该问题似乎与 jqmobile 无关，但应该是一般行为。