How to create a Popup Modal using Javascript in Magento 2?
Create a .phtml template file with the given content to make Modal popup using Magento 2,
<div class="main-block">
<div class="content">
<a href="javascript:void(0)" id="chart"><?php echo __('Chart size');?></a>
</div>
<!-- Your Popup content with main div display none -->
<div id="popup-chart" style="display:none;">
YOUR POPUP CONTENT GOES HERE
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal',
'domReady!'
],
function($, modal) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: []
};
modal(options, $('#modal-form'));
}
);
</script>
In the above template file, we can show a popup based on clicking on the chart size. When click on the chart link defined in our DOM element popup modal will be displayed.
Call Magento_Ui/js/modal/modal js file as a dependency.
There are many default options are available for modal.js file.
Different types of options you can provide as per your requirement in above options object.
List of default options for a modal popup, if you want to override the default value set options value in your custom template in the options object.
type: 'popup',
title: '',
subTitle: '',
modalClass: '',
focus: '[data-role="closeBtn"]',
autoOpen: false,
clickableOverlay: true,
popupTpl: popupTpl,
slideTpl: slideTpl,
customTpl: customTpl,
modalVisibleClass: '_show',
parentModalClass: '_has-modal',
innerScrollClass: '_inner-scroll',
responsive: false,
innerScroll: false,
modalTitle: '[data-role="title"]',
modalSubTitle: '[data-role="subTitle"]',
modalBlock: '[data-role="modal"]',
modalCloseBtn: '[data-role="closeBtn"]',
modalContent: '[data-role="content"]',
modalAction: '[data-role="action"]',
focusableScope: '[data-role="focusable-scope"]',
focusableStart: '[data-role="focusable-start"]',
focusableEnd: '[data-role="focusable-end"]',
appendTo: 'body',
wrapperClass: 'modals-wrapper',
overlayClass: 'modals-overlay',
responsiveClass: 'modal-slide',
trigger: '',
modalLeftMargin: 45,
closeText: $.mage.__('Close'),
buttons: [{
text: $.mage.__('Ok'),
class: '',
attr: {},
/**
* Default action on button click
*/
click: function (event) {
this.closeModal(event);
}
}],