Ich erstelle einen HTML / CSS- und jQuery-basierten Dateimanager für Mobilgeräte. Dazu gehört die Verwendung von CSS-basierten modalen Dialogfeldern für verschiedene Dateioperationen (Kopieren, Löschen usw.).

Ich erreiche das modale Dialogverhalten wie folgt:

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

Und das CSS ist:

#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;
}

Ich benutze jQuery, um es durch Aufrufen ein- und auszublenden.fadeIn() und.fadeOut() auf deroverlay Element.

So weit so gut - das funktioniert in allen Browsern auf meinem Entwicklercomputer.

Beim Testen auf meinem WP7 (Samsung Omnia 7) passiert jedoch etwas Seltsames. Der modale Dialog wird gut angezeigt, die Seite dahinter ist schwarz. Aber Klicks (oder Berührungen) gehen durch die#overlay und aktiviere irgendetwas dahinter, obwohl es alles dahinter völlig verdeckt und der Z-Index 1000 ist.

Ich habe dies auch mit dem bekannten "Lightview" -Plugin von Nick Stakenburg (einem gut getesteten und verfeinerten Teil des Codes) getestet und im IE von WP7 das gleiche Verhalten festgestellt.

Es scheint also, dass dies ein Fehler im Browser selbst sein könnte.

Kennt jemand eine Lösung dafür?

Edit - jsFiddle mit Beispiel eines Problems

Überprüfen Sie dies in Ihrem WP7-Gerät und sehen Sie, ob die Dateien auch dann noch angeklickt werden können, wenn ein Overlay darüber liegt:http://jsfiddle.net/michaelbromley/CHU76/