Estoy creando un administrador de archivos basado en jQuery y HTML / CSS destinado a dispositivos móviles. Parte de ello implica el uso de cuadros de diálogo modales basados ​​en CSS = para varias operaciones de archivo (copiar, eliminar, etc.).

Logro el comportamiento de diálogo modal como este:

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

Y el CSS es:

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

Uso jQuery para mostrarlo y ocultarlo llamando.fadeIn() y.fadeOut() sobre eloverlay elemento.

Hasta ahora, bien, esto funciona muy bien en todos los navegadores en mi máquina de desarrollo.

Sin embargo, al realizar pruebas en mi WP7 (Samsung Omnia 7), sucede algo bastante extraño. El diálogo modal se muestra bien, la página detrás de ella está en negro. Pero los clics (o grifos) pasan por la#overlay y active cualquier cosa detrás de él, aunque cubra totalmente todo lo que hay detrás y su índice z sea 1000.

También probé esto con el conocido plugin "Lightview" de Nick Stakenburg (un código bien probado y refinado) y encontré el mismo comportamiento en IE en WP7.

Así que parece que esto podría ser un error con el navegador en sí.

¿Alguien sabe alguna solución para esto?

Editar - jsFiddle con ejemplo de problema

Por lo tanto, compruebe esto en su dispositivo WP7 y vea cómo se puede hacer clic en los archivos incluso cuando hay una superposición sobre ellos:http://jsfiddle.net/michaelbromley/CHU76/