閉じられないMagento 2モーダルポップアップを作成する方法

閉じられないモーダルポップアップを作成しようとしています。クリックして次のページに移動するボタンがありますが、ユーザーが閉じないようにしたいと思います。

モーダルポップアップは次の3つの方法で閉じることができます。

1. [X]右上の十字ボタンをクリック
2. エスケープを押す
3. オーバーレイをクリックします

これまでのところ、これは私のモーダルJSであり、clickableOverlay: falseすでに3番目のものに取り組んでいると思います。

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

modal.closeModal()ミックスインを介して機能するように関数のオーバーライドを取得できませんでした。また、ミックスインを介してそれを実行すると、すべてのモーダルのWebサイト全体でオーバーライドされるため、不要です。この1つのモーダルでのみ必要です。

最終的には、を呼び出すトリガーを削除するだけで終わりましたmodal.closeModal()。それを達成するために使用できる他のいくつかのモーダルオプションがあります。

1. openedモーダルが開かれた直後にトリガーされるオプション/イベントでモーダルを開くときに閉じるボタンを非表示にします
2. 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"));
    }
);

その場合は、ミックスインを使用するのが妥当だと思います。

以下を試すことができます。

最初にモジュールで、以下を作成します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を返すとモーダルが閉じなくなります。

補足：これを行うのは嫌いです。閉じられないポップアップはウェブから禁止されるべきです。