CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
servarevitas3
servarevitas3

Reputation: 483

jQueryMobile dialog close button triggers click on item behind it

In a jQuery Mobile project, have a dialog box (not a popup) with some fields and two buttons styled like so:

        <a data-role="button" data-inline="true" data-transition="none" href="#"
            data-icon="check" data-iconpos="left" id="saveEdit">Save
        </a>
        <a data-role="button" data-inline="true" data-transition="none" href="#"
            data-icon="delete" data-iconpos="left" id="closeEdit">Cancel
        </a>

When one of them is clicked, a click event handler closes the dialog:

$(document).on("vclick", "#saveEdit", function () {

    LoginCookie(EditDoc, "Y");
    $('.ui-dialog').dialog('close');
});

However, when this happens, a click event is also fired on anything that was "behind" the dialog, almost as if you are tapping "through" the dialog button, even though it still fires a click event on the button. Is there a way to prevent this behavior?

Upvotes: 1

Views: 1507

Answers (2)

Jasman
Jasman

Reputation: 143

I'm finding the only thing that works for me is to make the modal blocking, particularly for laggy interfaces, like just about all older Android versions. You're intending for the user to tap on elements within the modal to close it. Here's a pattern as part of your handler:

window.setTimeout(function(){
        $(myModal).on({
            popupbeforeposition: function () { //make the popup blocking - no click outside to close
                $('.ui-popup-screen').off();
            }
        }).popup("open");
    }, 500);

Of course, this means the user can't just tap outside the modal to close it. But if you have a lot of form or other interactive elements on the page, I think this is a pretty crucial adjustment for usability.

Upvotes: 1

servarevitas3
servarevitas3

Reputation: 483

This appears to have fixed it: 

 $(document).on("vclick", "#saveEdit", function (e) {


            e.preventDefault();


            LoginCookie(EditDoc, "Y");
            $('.ui-dialog').dialog('close');
        });

Upvotes: 1

Related Questions