WP7 IE - CSS modal popup: Taps/Clicks go through overlay div and trigger links that should be invisible

Question

I am making a HTML/CSS and jQuery-based file manager aimed at mobile devices. Part of it involves the use of CSS=based modal dialog boxes for various file operations (copy, dele

Answer 1

OK, so it seems that there may be no "proper" solution to this problem (hey, 24 hours is a long time on SO!), so I have come up with my own hack solution:

I when the modal dialog box is opened, I simultaneously set the "visibility" CSS property of all the elements "behind" the overlay (i.e. links and anything else that would otherwise erroneously respond to taps/clicks) to "hidden" (by using jQuery's .css() function). This means that the page layout is not affected, and that there is now nothing there to be clicked on.

As I said, this is a bit of a hack and will not be suitable for everyone who runs into this problem. However, it works well for me.

Code in jsFiddle: http://jsfiddle.net/michaelbromley/CHU76/1/

Answer 2

Yes, this is clearly a bug in Window Phone 7 and it is not even fixed in Windows Phone 10. I will report this bug to Microsoft and hopefully it will be fixed.

Answer 3

If by "activate anything behind it" means input controls like text input then I had the same issue. To be honesty I don't know a good solution. My workaround was disabling input controls during popup is showed and then activating them back by removing disabled attribute. The problem seems not to be related to jqmobile, but supposed to be a general behavior.