Modals - How to specify custom template for modal
Question
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');
Solution
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,
};
OTHER TIPS
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