Jak stworzyć wyskakujące okienko Magento 2 Modal, którego nie można zamknąć?


10

Próbuję utworzyć modalne okienko wyskakujące, którego nie można zamknąć. Ma przycisk, który prowadzi do następnej strony, klikając go, ale nie chcę, aby użytkownicy mogli go zamknąć.

Wyskakujące okno modalne można zamknąć na 3 sposoby:

  1. Kliknij krzyżyk / [X]przycisk w prawym górnym rogu
  2. Naciśnięcie Escape
  3. Kliknij nakładkę

Jak dotąd jest to mój modalny JS i myślę clickableOverlay: false, że już zająłem się trzecim:

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 = '/';
                }
            }]
        });
    }
);

AKTUALIZACJA:

Próbowałem też skonfigurować modal w inny sposób, wypróbowując dostarczone rozwiązania:

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

1
4. Użyj narzędzia programistycznego, aby usunąć wstawiony modal z DOM
Kristof w Fooman,

@KristofatFooman, hahaha, Ok, dodam do tekstu modalnego: „Proszę nacisnąć F12, sprawdzić ten modal i usunąć go z DOM, aby go zamknąć”. Myślę, że masz rację, całkiem interesujące, ale zaakceptuję to ryzyko i nie podejmę żadnych działań, aby temu zapobiec.
7ochem

Odpowiedzi:


10

Nie mogłem uzyskać zastąpienia tej modal.closeModal()funkcji do pracy przez mixiny, a także myślę, że zrobienie tego przez mixin powoduje, że jest ona nadpisywana w całej witrynie na wszystkich modalach, których nie chcę. Potrzebuję go tylko na tym jednym module.

Skończyło się po prostu usunięciem dowolnego wyzwalacza, który zadzwoni modal.closeModal(). Istnieje kilka innych opcji modalnych, których możesz użyć, aby to osiągnąć:

  1. Chowam przycisk zamykania przy otwieraniu modalu z openedopcją / zdarzeniem, które zostanie uruchomione zaraz po otwarciu modalu
  2. Zastępuję tę keyEventHandlers.escapeKeyopcję

Oto mój końcowy kod:

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
Dobra robota, to zdecydowanie właściwy sposób
Raphael z Digital Pianism

7

Myślę, że użycie mixin w tym przypadku byłoby odpowiednie.

Możesz spróbować:

Najpierw w module utwórz następujące elementy view/base/requirejs-config.js:

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

Następnie utwórz view/base/web/hook.js:

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

Za pomocą tego miksu zastępujesz implementację closeModalmetody własną metodą. W takim przypadku zwrócenie wartości false pozwoliłoby uniknąć zamknięcia modalu.

Uwaga dodatkowa: Nienawidzę cię za to. Wyskakujące okienka, których nie można zamknąć, powinny zostać zablokowane w sieci.


3
Zrobiłem dokładnie to, ale wciąż się zamyka. Jeśli uruchomię to w moim terminalu, zobaczę, że mixin działa: jQuery.mage.modal.closeModaldaje mifunction() { return false; }
7ochem

1
@ 7ochem może return false;nie wystarczy. Szczerze mówiąc, nie jestem zbyt spokojny z JS. Uważam, że powinieneś przeczytać ten artykuł, który może pomóc ci zawęzić problem lub znaleźć inny możliwy sposób: alanstorm.com/the-curious-case-of-magento-2-mixins
Raphael at Digital Pianism

3
Myślę, że to również zastępuje closeModal()funkcję dla całej witryny, czego nie chcę. Chcę to zastosować tylko do tego pojedynczego modalu
7ochem
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.