Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 338
Erez Rabih Avatar asked Sep 03 '12 10:09

Erez Rabih


3 Answers

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.

like image 64
TheGwa Avatar answered Oct 22 '22 22:10

TheGwa


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

like image 41
jeremytripp Avatar answered Oct 22 '22 22:10

jeremytripp


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

like image 4
mklement0 Avatar answered Oct 22 '22 22:10

mklement0