Question

I am working on a mobile app written HTML/CSS/PHP/jQuery, testing on Android (Gingerbread) and desktop Chrome.

I have a modal box, a div set to display centered above content when a link is clicked. Between this div and the rest of the layers is another div which grays out the screen. Within the top div is a form with a single control, a select/dropdown.

The issue I am having is with touching the dropdown. If I am not perfectly precise (and sometime when I am), the screen indicates a touch on a link beneath the divs.

The link doesn’t load, but it still interferes with usability, big time.

Does anyone know what I can do to prevent this?

Answer 1

I don’t know about the touch aspect; maybe the browser on the mobile device has different behaviour than full desktop browsers. But in general, does stopping propagation on the modal dialog div help? Or is that what you’re already doing?

$('.modal').click(function(event) {
  event.stopPropagation();
});

(where .modal is your own selector for that box)