WP7 IE - модальное всплывающее окно CSS: касания / клики проходят через наложенный div и вызывают ссылки, которые должны быть невидимыми

Я делаю файловый менеджер на основе 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/

Ответы на вопрос(3)

это явно ошибка в Windows Phone 7, и она даже не исправлена в Windows Phone 10. Я сообщу об этой ошибке в Microsoft и, надеюсь, она будет исправлена.

Решение Вопроса

собственно» решение этой проблемы (эй, 24 часа - это очень долго на SO!), поэтому я придумала собственное решение для взлома:

Я, когда модальное диалоговое окно открывается, я одновременно устанавливаювидимость» CSS свойство всех элементов "позади" оверлей (то есть ссылки и все остальное, что в противном случае могло бы ошибочно реагировать на нажатия / клики) на "скрытый» (используя jQuery's.css() функция). Это означает, что на макет страницы это не влияет, и теперь там нечего нажимать.

Как я уже сказал, это что-то вроде хака и не подойдет всем, кто сталкивается с этой проблемой. Тем не менее, это хорошо работает для меня.

Код в jsFiddle:http://jsfiddle.net/michaelbromley/CHU76/1/

одом, такие как ввод текста, тогда у меня была та же проблема. Честно говоря, я нене знаю хорошего решения. Мой обходной путь - отключение элементов управления вводом во время показа всплывающего окна, а затем их активация путем удаления атрибута disabled. Проблема, похоже, не связана с jqmobile, но предполагается, что это общее поведение.

Ваш ответ на вопрос