Magento 2 create js Popup
This tutorial is about Magento 2 Create Popup.How to create Popup in magento 2.First of all i assume that you are familiar with magento 2 and hence you are at this level where you want to know how to Create Popup in magento 2. Above all if you are not familiar with advance magento concepts. Than you must look for basics,and please look for magento 2 basic tutorials.
So lets start our tutorial and focus on our topic.Lets suppose you want to create Popup in magento 2.Lets see how we can do this in a simple way.
In Magento 2 we can simply call modal popup using default modal.js library.
Create phtml file
First of all create a phtml(template) file.And paste the following code in it:
<div class="content">
<a href="javascript:void(0)" id="popup-open"><?php echo __('Chart Link');?></a>
</div>
<!-- Your Popup content with main div display none -->
<div id="popup-div" style="display:none;">
YOUR POPUP CONTENT GOES HERE
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal',
'domReady!'
],
function($,modal) {
$(function() {
$("#popup-open").on('click',function(e){
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: false
};
var elementObj = $('#popup-div');
var popup = modal(options, elementObj);
elementObj.modal("openModal");
}
});
}
);
</script>
In above template file we showed popup,based on click on chart link.It means When click on chart link is defined in our DOM element, popup modal will be displayed automatically.
So the next step is to Call Magento_Ui/js/modal/modal object in your require dependency(file).
There are many default options available for modal.js file in magento 2.You can use or you can pass any of them as per your requirement in above options object.
For that below is the List of default options for modal popup.Therefore if you want to override the default value,then you can set options value in your custom template in options object.
You can modify the below code according to your needs.
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);
}
}],
That’s it from this tutorial. I hope it serves the purpose.
Furthermore please feel free to drop any suggestions or queries in comments section. That will definitely be highly appreciated.
Qaisar Satti
Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!
