WP7 IE - popup modal CSS: Taps / Clicks passam por overlay div e acionam links que devem ser invisíveis

Question

Oct 26, 2012, 10:38 PM

html windows-phone-7 internet-explorer css

WP7 IE - popup modal CSS: Taps / Clicks passam por overlay div e acionam links que devem ser invisíveis

Eu estou fazendo um HTML / CSS e gerenciador de arquivos baseado em jQuery destinado a dispositivos móveis. Parte disso envolve o uso de caixas de diálogo modais baseadas em CSS para várias operações de arquivo (copiar, excluir, etc.).

Eu alcanço o comportamento 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>

E o 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;
}

Eu uso o jQuery para mostrar e esconder chamando.fadeIn() e.fadeOut() nooverlay elemento.

Até aí tudo bem - isso funciona muito bem em todos os navegadores da minha máquina de desenvolvimento.

No entanto, ao testar no meu WP7 (Samsung Omnia 7), uma coisa bastante bizarra acontece. A caixa de diálogo modal mostra-se bem, a página por trás dela é apagada. Mas os cliques (ou toques) passam pelo#overlay e ativar qualquer coisa por trás dele, mesmo que isso cubra tudo e que o índice z seja 1000.

Eu também testei isso com o conhecido plug-in "Lightview" de Nick Stakenburg (um pedaço de código bem testado e refinado) e encontrei o mesmo comportamento no IE no WP7.

Então parece que isso pode ser um bug com o próprio navegador.

Alguém conhece alguma solução para isso?

Edit - jsFiddle com exemplo de problema

Então, verifique isso no seu dispositivo WP7 e veja como os arquivos ainda podem ser clicados mesmo quando há uma sobreposição por cima deles:http://jsfiddle.net/michaelbromley/CHU76/

leaveComments