Magento2 – How to Specify Custom Template for Modal

magento2modal

How can I specify an custom template for an modal? I tried to specify the type and customTemplate, but no luck.
The template file is called modal-gallery.html and is placed on the same path as the modal-popup.

var modalOptions = {
    type: 'gallery',
    customTpl: 'gallery'
};
jQuery('<div />').modal(modalOptions).modal('openModal');

Best Answer

I found the answer by myself. You need to define 'text!ui/template/modal/modal-gallery.html' as galleryTpl and use the modalOptions as below:

var modalOptions = {
type: 'gallery',
customTpl: 'gallery',
galleryTpl: galleryTpl,
};

Related Solutions

Magento – How to close a modal in Magento 2

Just use single line followed by element :

$("#popup-modal").modal("closeModal");

How to Create a Non-Closable Modal Popup in Magento 2

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:

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

Best Answer

Related Solutions

Magento – How to close a modal in Magento 2

How to Create a Non-Closable Modal Popup in Magento 2

Related Topic