Làm cách nào để tạo cửa sổ bật lên Magento 2 Modal không thể đóng?

Tôi đang cố gắng tạo một cửa sổ bật lên phương thức không thể đóng được. Nó có một nút đưa bạn đến trang tiếp theo bằng cách nhấp vào nó, nhưng tôi không muốn người dùng có thể đóng nó.

Cửa sổ bật lên phương thức có thể được đóng theo 3 cách:

1. Nhấp vào nút chéo / [X]ở góc trên bên phải
2. Nhấn thoát
3. Nhấp vào lớp phủ

Cho đến nay, đây là JS phương thức của tôi và tôi nghĩ rằng clickableOverlay: falsetôi đã giải quyết cái thứ ba:

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

CẬP NHẬT:

Tôi cũng đã cố gắng thiết lập phương thức theo một cách khác khi thử các giải pháp được cung cấp:

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

Tôi không thể ghi đè modal.closeModal()chức năng để hoạt động thông qua mixin và tôi cũng nghĩ rằng việc thực hiện thông qua mixin sẽ khiến nó ghi đè lên toàn bộ trang web trên tất cả các phương thức mà tôi không muốn. Tôi chỉ cần nó trên một phương thức này.

Tôi đã kết thúc bằng cách đơn giản loại bỏ bất kỳ kích hoạt sẽ gọi modal.closeModal(). Có một số tùy chọn phương thức khác mà bạn có thể sử dụng để đạt được điều đó:

1. Tôi ẩn nút đóng khi mở phương thức với openedtùy chọn / sự kiện sẽ được kích hoạt ngay sau khi phương thức được mở
2. Tôi đang ghi đè keyEventHandlers.escapeKeytùy chọn

Vì vậy, đây là mã cuối cùng của tôi:

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

Tôi nghĩ rằng sử dụng mixins trong trường hợp đó sẽ có liên quan.

Bạn có thể thử như sau:

Đầu tiên trong mô-đun của bạn, tạo như sau view/base/requirejs-config.js:

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

Sau đó tạo view/base/web/hook.js:

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

Với mixin này, bạn thay thế việc thực hiện closeModalphương thức bằng phương thức của riêng bạn. Trong trường hợp đó, trả về false sẽ tránh đóng phương thức.

Lưu ý bên: Tôi ghét bạn vì đã làm điều này. Các cửa sổ bật lên không thể xóa được nên bị cấm trên web.