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:
- Clicking the cross/
[X]
button in the top right corner - Pressing escape
- 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"));
}
);
Best Answer
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:opened
option/event which will be triggered right after the modal has been openedkeyEventHandlers.escapeKey
optionSo this is my final code: