Tworzę menedżer plików oparty na HTML / CSS i jQuery skierowany do urządzeń mobilnych. Część obejmuje użycie modalnych okien dialogowych opartych na CSS = do różnych operacji na plikach (kopiowanie, usuwanie itp.).

Osiągam takie zachowanie modalne:

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

A CSS to:

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

Używam jQuery, aby go pokazać i ukryć, dzwoniąc.fadeIn() i.fadeOut() naoverlay element.

Do tej pory tak dobrze - to działa świetnie we wszystkich przeglądarkach na moim komputerze dev.

Jednak podczas testowania na moim WP7 (Samsung Omnia 7) zdarza się dość dziwna rzecz. Okno modalne jest dobrze widoczne, strona za nim jest zaciemniona. Ale kliknięcia (lub stuknięcia) przechodzą przez#overlay i aktywuj cokolwiek za nim, nawet jeśli całkowicie ukrywa to wszystko, a jego indeks Z wynosi 1000.

Przetestowałem to również z dobrze znaną wtyczką „Lightview” Nicka Stakenburga (dobrze przetestowany i dopracowany fragment kodu) i znalazłem to samo zachowanie na IE na WP7.

Wygląda na to, że może to być błąd związany z samą przeglądarką.

Czy ktoś zna jakieś rozwiązanie?

Edycja - jsPoczątkuj z przykładem problemu

Sprawdź to w swoim urządzeniu WP7 i zobacz, jak nadal można klikać pliki, nawet jeśli nad nimi znajduje się nakładka:http://jsfiddle.net/michaelbromley/CHU76/