我正在制作一个针对移动设备的基于 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/
最佳答案
如果“激活它背后的任何东西”意味着像文本输入这样的输入控件,那么我遇到了同样的问题。老实说,我不知道一个好的解决方案。我的解决方法是在显示弹出窗口期间禁用输入控件,然后通过删除禁用属性将它们重新激活。该问题似乎与 jqmobile 无关,但应该是一般行为。
关于html - WP7 IE - CSS 模态弹出窗口 : Taps/Clicks go through overlay div and trigger links that should be invisible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13094097/