¿Cómo crear una ventana emergente modal de Magento 2 que no se puede cerrar?


10

Estoy tratando de crear una ventana emergente modal que no se puede cerrar. Tiene un botón que lo lleva a la página siguiente haciendo clic en él, pero no quiero que los usuarios puedan cerrarlo.

La ventana emergente modal se puede cerrar de 3 maneras:

  1. Al hacer clic en la cruz / [X]botón en la esquina superior derecha
  2. Presionando escape
  3. Haga clic en la superposición

Hasta ahora, este es mi JS modal y creo clickableOverlay: falseque ya he abordado el tercero:

require(
    [ 'jquery', 'Magento_Ui/js/modal/modal' ],
    function($, modal) {
        $("#popup").modal({
            autoOpen: true,
            responsive: true,
            clickableOverlay: false,
            modalClass: 'modal-custom',
            title: 'Popup',
            buttons: [{
                text: $.mage.__('Take me back to the homepage'),
                class: 'action close-popup wide',
                click: function () {
                    window.location.href = '/';
                }
            }]
        });
    }
);

ACTUALIZAR:

También intenté configurar el modal de una manera diferente al probar las soluciones proporcionadas:

require(
    [ 'jquery', 'Magento_Ui/js/modal/modal' ],
    function($, modal) {
        modal({
            //options
        }, $("#popup"));
    }
);

1
4. Use una herramienta de desarrollador para eliminar el modal insertado del DOM
Kristof en Fooman el

@KristofatFooman, jajaja, Ok, agregaré al texto modal: "Presione F12, inspeccione este modal y retírelo del DOM para cerrarlo". Creo que tienes razón, bastante interesante, pero aceptaré ese riesgo y no implementaré ninguna medida para evitarlo.
7ochem

Respuestas:


10

No pude obtener una anulación de la modal.closeModal()función para que funcione a través de mixins y también creo que hacerlo a través de un mixin hace que se anule a través de todo el sitio web en todos los modales, lo que no quiero. Solo lo necesito en este modal.

Terminé simplemente quitando cualquier disparador que llame modal.closeModal(). Hay algunas otras opciones modales que puede usar para lograr eso:

  1. Oculto el botón de cierre al abrir el modal con la openedopción / evento que se activará inmediatamente después de que se haya abierto el modal
  2. Estoy anulando la keyEventHandlers.escapeKeyopción

Entonces este es mi código final:

require(
    [ 'jquery', 'Magento_Ui/js/modal/modal' ],
    function($, modal) {
        modal({
            autoOpen: true,
            responsive: true,
            clickableOverlay: false,
            modalClass: 'modal-custom',
            title: 'Popup',
            buttons: [{
                text: $.mage.__('Take me back to the homepage'),
                class: 'action close-popup wide',
                click: function () {
                    window.location.href = '/';
                }
            }],
            opened: function($Event) {
                $('.modal-header button.action-close', $Event.srcElement).hide();
            },
            keyEventHandlers: {
                escapeKey: function () { return; }
            }
        }, $("#popup"));
    }
);

1
Buen trabajo, definitivamente es la forma correcta de hacerlo
Raphael en Digital Pianism

7

Creo que usar mixins en ese caso sería relevante.

Puedes probar lo siguiente:

Primero en su módulo, cree lo siguiente view/base/requirejs-config.js:

var config = {
    'config':{
        'mixins': {
            'Magento_Ui/js/modal/modal': {
                'Vendor_Module/hook':true
            }
        }
    }
}; 

Luego crea view/base/web/hook.js:

define([], function(){
    'use strict';    
    return function(targetModule){
        targetModule.closeModal = function(){
            return false;
        }
        return targetModule;
    };
});

Con este mixin, reemplaza la implementación del closeModalmétodo con su propio método. En ese caso, devolver falso evitaría cerrar el modal.

Nota al margen: te odio por hacer esto. Las ventanas emergentes que no se pueden cerrar deben estar prohibidas en la web.


3
Hice exactamente eso, pero aún así se cierra. Si ejecuto esto en mi terminal, veo que el mixin ESTÁ funcionando: jQuery.mage.modal.closeModalme dafunction() { return false; }
7ochem

1
@ 7ochem tal vez return false;no sea suficiente. No estoy muy a gusto con JS para ser honesto. Creo que debería leer este artículo, puede ayudarlo a reducir el problema o encontrar otra forma posible de hacerlo: alanstorm.com/the-curious-case-of-magento-2-mixins
Raphael en Digital Pianism

3
Supongo que esto también reemplaza la closeModal()función en todo el sitio, que no quiero. Solo quiero aplicar esto a este modal único
7ochem
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.