Bagaimana cara membuat popup Magento 2 Modal yang tidak bisa ditutup?


10

Saya mencoba membuat modal popup yang tidak bisa ditutup. Ini memiliki tombol yang akan membawa Anda ke halaman berikutnya dengan mengkliknya, tetapi saya tidak ingin pengguna dapat menutupnya.

Modal popup dapat ditutup dengan 3 cara:

  1. Mengklik tombol silang / [X]di sudut kanan atas
  2. Menekan pelarian
  3. Klik pada overlay

Sejauh ini ini adalah modal JS saya dan saya pikir dengan clickableOverlay: falsesaya sudah menangani yang ke-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 = '/';
                }
            }]
        });
    }
);

MEMPERBARUI:

Saya juga mencoba mengatur modal dengan cara yang berbeda ketika mencoba solusi yang disediakan:

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

1
4. Gunakan alat pengembang untuk menghapus modal yang dimasukkan dari DOM
Kristof di Fooman

@KristofatFooman, hahaha, Ok, saya akan menambahkan ke teks modal: "Silakan tekan F12, periksa modal ini dan hapus dari DOM untuk menutupnya". Saya pikir Anda benar, yang cukup menarik, tetapi saya akan menerima risiko itu dan tidak menerapkan tindakan apa pun untuk mencegahnya.
7ochem

Jawaban:


10

Saya tidak bisa mendapatkan override modal.closeModal()fungsi untuk bekerja melalui mixin dan saya pikir melakukannya melalui mixin membuatnya menimpa seluruh situs web pada semua modals, yang tidak saya inginkan. Saya hanya membutuhkannya pada modal yang satu ini.

Saya berakhir dengan hanya menghapus pemicu yang akan memanggil modal.closeModal(). Ada beberapa opsi modal lain yang dapat Anda gunakan untuk mencapai itu:

  1. Saya menyembunyikan tombol tutup pada pembukaan modal dengan openedopsi / acara yang akan dipicu tepat setelah modal telah dibuka
  2. Saya mengganti keyEventHandlers.escapeKeyopsi

Jadi ini kode terakhir saya:

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
Kerja

7

Saya rasa menggunakan mixin dalam kasus itu akan relevan.

Anda dapat mencoba yang berikut ini:

Pertama di modul Anda, buat yang berikut ini view/base/requirejs-config.js:

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

Kemudian buat view/base/web/hook.js:

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

Dengan mixin ini, Anda mengganti implementasi closeModalmetode dengan metode Anda sendiri. Dalam hal itu, pengembalian false akan menghindari penutupan modal.

Catatan: Aku benci kamu karena melakukan ini. Munculan yang tidak dapat ditutup harus diblokir dari web.


3
Saya melakukan hal itu, tetapi tetap saja ditutup. Jika saya menjalankan ini di terminal saya, saya melihat bahwa mixin IS berfungsi: jQuery.mage.modal.closeModalberi sayafunction() { return false; }
7ochem

1
@ 7ochem mungkin return false;tidak cukup. Jujur saja, saya tidak terlalu nyaman dengan JS. Saya rasa Anda harus membaca artikel ini karena dapat membantu Anda mempersempit masalah atau menemukan cara lain untuk melakukannya: alanstorm.com/the-curious-case-of-magento-2-mixins
Raphael di Digital Pianism

3
Saya kira ini juga menggantikan closeModal()fungsi situs yang luas, yang tidak saya inginkan. Saya hanya ingin menerapkan ini pada modal tunggal ini
7ochem
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.