Prevent JQuery Mobile from closing a popup when user taps outside of it

Question

I'm using JQuery Mobile 1.2.0 alpha 1.

Currently, when I open a popup and tap outside of it anywhere on the screen the popup is being closed. I was wondering if there's any JQuery Mobile attribute I have missed which can be set and prevent closing the popup upon outside-tap? (modal popup)

(The documentation for popups can be found here)

EDIT:

I had an idea of solving this but still can't implement it to work:

When a JQM popup show up theres a div which covers all of the screen with class of ui-popup-screen. I thought somehow to give it a large z-index and unbind all click/tap function from it. Doing this does not solve my problem but I guess it is a small step in the direction.

Thnx in advance.

Answer 1

This has been added as a feature request on Github. See issue here.

As a hack for this in the interim is to unbind the events on the ui-popup-screen. I would put the following code in the pageinit.

$("#yourPopupId").on({
    popupbeforeposition: function () {
        $('.ui-popup-screen').off();
    }
});

This is a heavy handed quickfix, but it works.

Answer 2

For future searchers, as of 1.3, this is now supported. Simply add the data-dismissible="false" attribute to the panel div.

Answer 3

Building on @TheGwa's excellent solution, here's a generalization to prepare for the upcoming official feature (presumably, in version 1.3):

• Add data-dismissible='false' to the markup of all popups that you don't want to be dismissible by tapping outside of them.

• Add the following event handler to your app; it will handle all popups:

_

$(window).on('popupbeforeposition', 'div:jqmData(role="popup")', function() {
        var notDismissible = $(this).jqmData('dismissible') === false;
        if (notDismissible) {
          $('.ui-popup-screen').off();
        }
});

-

Once the feature is officially supported, simply remove the event handler.

Note that, sadly, the official documentation (as of 1.2) suggests that the feature is already available, but it is not - see http://jquerymobile.com/test/docs/pages/popup/options.html

Answer 4

Add data-dismissible="false" in following way.

<div data-role="popup" id="popupnotification" data-overlay-theme="b" data-theme="c"  data-position-to="window" style="max-width:600px;">

Answer 5

@ MJB -> If you want to be able to click anywhere (e.g. on a button) when a pop-up is active, you can alter the CSS of the pop-up as follows:

.ui-popup-screen{
                    position: relative;
                }

This worked for me.

Note: Pop-up does not close on click anymore when you do this - I made a workaround:

$(window).click(function() {    
    if ($( "#myPopup-popup" ).hasClass("ui-popup-active")){
        $( "#myPopup" ).popup( "close" );
    }
});

the myPopup-popup ID is generated by JQM - myPopup is the ID I gave the pop-up.