modal - Evita que JQuery Mobile cierre una ventana emergente cuando el usuario toca fuera de ella

ventanas emergentes con jquery

Question

Estoy usando JQuery Mobile 1.2.0 alpha 1.

Actualmente, cuando abro una ventana emergente y toco fuera de ella en cualquier lugar de la pantalla, la ventana emergente se está cerrando. Me preguntaba si hay algún atributo de JQuery Mobile que haya omitido, ¿cuál se puede configurar e impedir que se cierre la ventana emergente al tocar fuera? (ventana emergente modal)

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

EDITAR:

Tuve una idea de resolver esto pero todavía no puedo implementarlo para que funcione:

Cuando aparece una ventana emergente JQM, hay un div que cubre toda la pantalla con la clase de ui-popup-screen. Pensé de alguna manera darle un gran índice z y desenlazar todas las funciones de hacer clic / tocar. Hacer esto no resuelve mi problema, pero supongo que es un pequeño paso en la dirección.

Gracias por adelantado.

Answer 1

@ MJB -> Si desea poder hacer clic en cualquier lugar (por ejemplo, en un botón) cuando una ventana emergente está activa, puede modificar el CSS de la ventana emergente de la siguiente manera:

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

Esto funcionó para mí.

Nota: la ventana emergente ya no se cierra al hacer clic cuando haces esto: hice una solución:

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

la ID de myPopup-popup es generada por JQM - myPopup es la ID que le di a la ventana emergente.

Answer 2

Agregue 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 3

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

Como un truco para esto en el ínterin es desvincular los eventos en la pantalla ui-popup. Yo pondría el siguiente código en la página de inicio.

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

Este es un fastfix de mano dura, pero funciona.

Answer 4

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

Answer 5

Sobre la base de la excelente solución de @ TheGwa, he aquí una generalización para preparar la próxima característica oficial (probablemente, en la versión 1.3):

• Agregue data-dismissible=''false'' al marcado de todas las ventanas emergentes que no desea que se puedan descartar tocando fuera de ellas.

• Agregue el siguiente controlador de eventos a su aplicación; manejará 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 es oficialmente compatible, simplemente elimine el controlador de eventos.

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