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.

Solution 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.

Solution 2

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

Solution 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

Comments

[MJB]

Do you know how I can make it so that the background is still enabled? :) I cannot dismiss it, but also I cannot interact with the rest anymore.

[TheGwa]

@MJB I am not sure exactly what you are trying to achieve. Could you elaborate on what you still want to interact with?

[MJB]

I have a map in the background. I want a popup (sidebar) to appear with some controls (buttons) and actions the user issues when he clicks a button and then on the map.

[TheGwa]

And you want to be able to use the map while the popup is open?

[Intrepidd]

This does not work when the popup has the data-history="false" attribute :(

[Llewellyn Collins]

What do we add it to. could you please show an example

[BVernon]

I have 1.7.13, but adding that attribute to my div does nothing. Wonder what I could be doing wrong?