Я делаю файловый менеджер на основе HTML / CSS и jQuery для мобильных устройств. Часть этого включает использование модальных диалоговых окон на основе CSS = для различных файловых операций (копирование, удаление и т. Д.).

Я получаю модальное диалоговое поведение следующим образом:

     <a href="#" id="modalBoxClose">[close]</a>
     
          
     

И 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 и активировать что-нибудь за этим, даже если оно полностью покрывает все позади и этоs z-индекс равен 1000.

Я также проверил это с известным "Lightview» плагин от Ника Стакенбурга (хорошо проверенный и усовершенствованный кусок кода) и обнаружил то же поведение в IE на WP7.

Похоже, что это может быть ошибкой самого браузера.

Кто-нибудь знает какое-либо решение для этого?

Edit - jsFiddle с примером проблемы

Итак, проверьте это на своем устройстве WP7 и посмотрите, как по-прежнему можно щелкать файлы, даже если поверх них есть наложение:http://jsfiddle.net/michaelbromley/CHU76/