1

我正在制作一个针对移动设备的基于 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通过调用元素来显示.fadeIn()和隐藏它。.fadeOut()overlay

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

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

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

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

有谁知道任何解决方案？

编辑 - 带有问题示例的 jsFiddle

所以，在你的 WP7 设备中检查一下，看看即使文件顶部有覆盖层，仍然可以点击文件：http: //jsfiddle.net/michaelbromley/CHU76/

4

3 回答 3

1

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

于 2012-10-27T19:37:17.027 回答
0

好的，看来这个问题可能没有“适当”的解决方案（嘿，24 小时是很长的时间！），所以我想出了自己的破解解决方案：

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

正如我所说，这有点像 hack，并不适合遇到这个问题的每个人。但是，它对我来说效果很好。

jsFiddle 中的代码：http: //jsfiddle.net/michaelbromley/CHU76/1/

于 2012-10-28T20:15:00.453 回答
0

是的，这显然是 Window Phone 7 中的一个错误，甚至在 Windows Phone 10 中都没有修复。我会将这个错误报告给 Microsoft，希望它会得到修复。

于 2014-03-26T09:57:42.640 回答