WP7 IE -CSS模态弹出窗口:TAPS/clicks通过叠加div和触发链接，应无形

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无关，而应该是一般行为。

Answer 2

好吧，所以似乎没有"适当的"解决方案（嘿，24小时是很长的时间！），所以我想出了自己的问题黑客解决方案：

i打开"模态"对话框时，我同时将"可见性"设置为"覆盖层"后面的所有元素的CSS属性（即链接和其他任何可能会错误地响应水龙头/点击）的内容）为"隐藏"（通过使用jQuery的.css()函数）。这意味着页面布局不受影响，现在没有任何单击。

正如我所说，这有点黑客，不适合所有遇到这个问题的人。但是，这对我来说很好。

jsfiddle中的代码：http：//jsfiddle.net/michaelbromley/chu76/1/

Answer 3

是的，这显然是Window Phone 7中的错误，甚至在Windows Phone 10中都没有修复。我将向Microsoft报告此错误，并希望它将被修复。