Предотвратите закрытие всплывающего окна JQuery Mobile, когда пользователь выходит за его пределы

Я использую JQuery Mobile 1.2.0 alpha 1.

В настоящее время, когда я открываю всплывающее окно и выхожу из него где-нибудь на экране, всплывающее окно закрывается. Мне было интересно, есть ли какой-либо атрибут JQuery Mobile, который я пропустил, который можно установить и предотвратить закрытие всплывающего окна при внешнем нажатии? (модальное всплывающее окно)

(Документацию для всплывающих окон можно найти здесь)

EDIT:

У меня возникла идея решить эту проблему, но я не могу ее реализовать:

Когда всплывающее окно JQM отображает div, который охватывает весь экран с классом ui-popup-screen. Я подумал как-то дать ему большой z-индекс и отпереть все функции click/tap из него. Выполнение этого не решает мою проблему, но я думаю, что это небольшой шаг в направлении.

Thnx заранее.

Ответ 1

Это было добавлено как запрос функции на Github. См. Вопрос здесь.

В то время как взлом для этого в промежутке времени - это отменить события на экране ui-popup. Я бы поставил следующий код на странице.

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

Это быстрое сжатие, но оно работает.

Ответ 2

Для будущих поисковиков, начиная с 1.3, это теперь поддерживается. Просто добавьте атрибут data-dismissible="false" к панели div.

Ответ 3

Основываясь на превосходном решении @TheGwa, здесь обобщение для подготовки к предстоящей официальной функции (предположительно, в версии 1.3):

Добавьте data-dismissible='false' к разметке всех всплывающих окон, которые вы не хотите быть недоступными, нажав вне их.
Добавьте в приложение следующий обработчик событий; он будет обрабатывать все всплывающие окна:

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

Как только функция официально поддерживается, просто удалите обработчик событий.

Обратите внимание, что, к сожалению, официальная документация (по версии 1.2) предполагает, что эта функция уже доступна, но она отсутствует - см. http://jquerymobile.com/test/docs/pages/popup/options.html

Ответ 4

Добавьте data-dismissible = "false" следующим образом.

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

Ответ 5

@MJB → Если вы хотите щелкнуть в любом месте (например, на кнопке), когда всплывающее окно активно, вы можете изменить CSS всплывающего окна следующим образом:

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

Это сработало для меня.

Примечание. Всплывающее окно больше не закрывается при щелчке. Я сделал обходной путь:

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

myPopup-popup ID генерируется JQM - myPopup - это идентификатор, который я дал всплывающему окну.