Prevenir jQuery Mobile se cierre una ventana emergente cuando el usuario toca fuera de ella

Question

estoy usando jQuery Mobile 1.2.0 alpha 1.

En la actualidad, cuando abro un emergente y toque fuera de ella en cualquier lugar de la pantalla de la ventana emergente está siendo cerrado. Me preguntaba si hay algún atributo de JQuery Mobile que me haya olvidado y que pueda establecerse y evitar cerrar la ventana emergente con un toque externo. (Popup modal)

(La documentación para las ventanas emergentes se puede encontrar here)

EDIT:

Yo tenía una idea de resolver esto, pero aún no se puede aplicar a trabajar:

Cuando aparece una ventana emergente de JQM hay un div que cubre toda la pantalla con una clase de pantalla emergente. Pensé de alguna manera darle un gran índice Z y desvincular de él la función de hacer clic/tocar. Hacer esto no resuelve mi problema, pero supongo que es un pequeño paso en la dirección.

Thnx por adelantado.

Answer 1

Esto se ha agregado como una solicitud de función en Github. Ver el número here.

Como un truco para esto en el ínterin es desvincular los eventos en la pantalla emergente. Pondría el siguiente código en la página.

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

Esta es una solución rápida de mano dura, pero funciona.

Answer 2

Sobre la base @ excelente solución de TheGwa, aquí es una generalización para prepararse para la función oficial próxima (presumiblemente, en la versión 1.3):

• Añadir data-dismissible='false' para el marcado de todas las ventanas emergentes que no desee para ser descartado tocando fuera de ellos.

• Agregue el siguiente controlador de eventos a su aplicación; que se encargará de todas las ventanas emergentes:

_

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

-

Una vez que la función se admite oficialmente, basta con quitar el controlador de eventos.

Tenga en cuenta que, por desgracia, la documentación oficial (a partir de 1.2) sugiere que la función ya está disponible, pero no es - ver http://jquerymobile.com/test/docs/pages/popup/options.html

Answer 3

Para los futuros investigadores, a partir de 1.3, esto es ahora compatible. Simplemente agregue el atributo data-dismissible="false" al panel div.

Answer 4

Add data-dismissible = "false" de la siguiente manera.

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

Answer 5

@ MJB -> Si desea poder hacer clic en cualquier lugar (p.en un botón) cuando un pop-up es activo, puede modificar las reglas CSS de la ventana emergente de la siguiente manera:

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

Esto funcionó para mí.

Nota: Pop-up no se cierra al hacer clic más cuando se hace esto - Me hizo una solución:

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

el ID MyPopup-emergente es generada por JQM - MyPopup es el ID de di la ventana emergente.