it-swarm.com.ru

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

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

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

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

EDIT:

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

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

Спасибо заранее.

16
Erez Rabih

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

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

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

Это быстрое исправление, но оно работает.

24
TheGwa

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

19
jeremytripp

Основываясь на отличном решении @ 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
mklement0

@ 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 - это идентификатор, который я дал всплывающему окну.

0
J.T. Houtenbos

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

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