9

I'm trying to create a modal popup that cannot be closed. It has a button that takes you to the next page by clicking on it, but I don't want users to be able to close it.

The modal popup can be closed in 3 ways:

  1. Clicking the cross/[X] button in the top right corner
  2. Pressing escape
  3. Click on the overlay

So far this is my modal JS and I think with clickableOverlay: false I've already tackled the 3rd one:

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

UPDATE:

I also tried to setup the modal in a different way when trying the provided solutions:

require(
    [ 'jquery', 'Magento_Ui/js/modal/modal' ],
    function($, modal) {
        modal({
            //options
        }, $("#popup"));
    }
);
  • 1
    4. Use a developer tool to remove the inserted modal from the DOM – Kristof at Fooman Dec 4 '16 at 21:28
  • @KristofatFooman, hahaha, Ok, I'll add to the modal text: "Please press F12, inspect this modal and remove it from the DOM to close it". I think you're right, quite interesting one, but I'll accept that risk and not implement any measures to prevent that one. – 7ochem Dec 5 '16 at 8:36
8

I couldn't get an override of the modal.closeModal() function to work via mixins and also I think doing it via a mixin makes it override through the whole website on all modals, which I do not want. I only need it on this one modal.

I ended up by simply removing any trigger that will call modal.closeModal(). There are some other modal options you can use to achieve that:

  1. I hide the close button on opening the modal with the opened option/event which will be triggered right after the modal has been opened
  2. I'm overriding the keyEventHandlers.escapeKey option

So this is my final code:

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

I reckon using mixins in that case would be relevant.

You can try the following:

First in your module, create the following view/base/requirejs-config.js :

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

Then create view/base/web/hook.js :

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

With this mixin, you replace the implementation of the closeModal method with your own method. In that case, returning false would avoid closing the modal.

Side note: I hate you for doing this. Unclosable popups should be banned from the web.

  • 3
    I did exactly that, but still it closes. If I run this in my terminal, I see that the mixin IS working: jQuery.mage.modal.closeModal gives me function() { return false; } – 7ochem Dec 1 '16 at 14:59
  • 1
    @7ochem maybe return false; is not enough. I'm not super at ease with JS to be honest. I reckon you should read this article it may help you narrow down the issue or finding another possible way of doing it: alanstorm.com/the-curious-case-of-magento-2-mixins – Raphael at Digital Pianism Dec 1 '16 at 15:03
  • 3
    I guess this also replaces the closeModal() function site wide, which I do not want. I only want to apply this to this single modal – 7ochem Dec 1 '16 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.