3

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');
3

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,
};
0

yes, extending the answer provided above

1) Set your script

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal',
        'text!ui/template/modal/modal-gallery.html'
    ],
    function($,modal, galleryTpl) {
        var options = {
            type: 'gallery',
            customTpl: 'gallery',
            galleryTpl: galleryTpl,
...

Where type and customTpl attributes, got the end of the custom name file

2) Place your new custom file on these path frontend/<brand>/<customTheme>/Magento_Ui/web/templates/modal/modal-gallery.html

3) Tip, to prevent restyling all - On your custom template, add to the first <aside> tag, the class modal-popup

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.