닫을 수없는 마 젠토 2 모달 팝업을 만드는 방법은 무엇입니까?

10

닫을 수없는 모달 팝업을 만들려고합니다. 클릭하면 다음 페이지로 이동하는 버튼이 있지만 사용자가 페이지를 닫을 수는 없습니다.

모달 팝업은 3 가지 방법으로 닫을 수 있습니다.

[X]오른쪽 상단 의 십자형 / 버튼 클릭
탈출을 누르면
오버레이를 클릭하십시오

지금까지 이것은 내 모달 JS이며 clickableOverlay: false이미 세 번째 것을 다루었 다고 생각합니다 .

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

최신 정보:

제공된 솔루션을 시도 할 때 다른 방법으로 모달을 설정하려고했습니다.

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

— 7ochem
소스

1

4. 개발자 도구를 사용하여 DOM에서 삽입 된 모달을 제거합니다.

— Kristof at Fooman

@KristofatFooman, hahaha, Ok, 모달 텍스트에 추가하겠습니다. "F12를 누르고이 모달을 검사 한 후 DOM에서 제거하여 닫으십시오." 나는 당신이 옳고 매우 흥미로운 것이라고 생각하지만 그 위험을 수용하고 그 위험을 막기위한 조치를 취하지 않을 것입니다.

— 7ochem

10

modal.closeModal()mixin을 통해 작동 하는 함수 의 재정의를 얻을 수 없었으며 mixin을 통해 기능을 사용하면 모든 모달의 전체 웹 사이트를 통해 재정의한다고 생각합니다. 이 모달에만 필요합니다.

나는 호출 할 트리거를 간단히 제거하여 끝났습니다 modal.closeModal(). 이를 달성하기 위해 사용할 수있는 다른 모달 옵션이 있습니다.

opened옵션 / 이벤트로 모달을 열 때 닫기 버튼을 숨기고 모달을 연 직후 트리거됩니다.
keyEventHandlers.escapeKey옵션을 재정의하고 있습니다

그래서 이것은 내 최종 코드입니다.

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"));
    }
);

— 7ochem
소스

1

잘

— 하셨습니다.

7

이 경우 믹스 인을 사용하는 것이 적절하다고 생각합니다.

다음을 시도 할 수 있습니다.

먼저 모듈에서 다음을 작성하십시오 view/base/requirejs-config.js.

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

그런 다음 view/base/web/hook.js:

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

이 믹스 인을 사용하면 closeModal메소드 구현을 자신 의 메소드로 대체 할 수 있습니다. 이 경우 false를 반환하면 모달을 닫지 않아도됩니다.

참고 : 나는 이것을하는 당신을 싫어. 웹에서 닫을 수없는 팝업을 차단해야합니다.

— 디지털 피아니즘의 라파엘
소스

3

나는 그것을 정확하게했지만 여전히 닫힙니다. : 내 터미널에서 이것을 실행하면, 나는 작동하고 믹스 인이 볼 jQuery.mage.modal.closeModal나에게주는function() { return false; }

— 7ochem

1

@ 7ochem return false;이 충분하지 않을 수 있습니다. 나는 솔직히 JS로 편하지 않다. 이 기사를 읽으면 문제를 좁히거나 다른 가능한 방법을 찾는 데 도움이 될 수 있습니다. alanstorm.com/the-curious-case-of-magento-2-mixins

— Raphael at Digital Pianism

3

나는 이것이 또한 closeModal()함수 사이트를 대체한다고 생각한다 . 이 단일 모달에만 적용하고 싶습니다

— 7ochem