:::: MENU ::::

Magento 2 create js Popup

Magento 2 create 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="main-block">
    <div class="content">
     <a href="javascript:void(0)" id="popup-open"><?php echo __('Chart Link');?></a>
    <!-- Your Popup content with main div display none -->
 <div id="popup-div" style="display:none;">
        function($,modal) {
            $(function() {
                    var options = {
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        buttons: false
              var elementObj = $('#popup-div');
                    var popup = modal(options, elementObj);

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.

    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) {

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.

Author: Qaisar Satti
Category: Magento 2
Last Modified: October 29, 2018

So, what do you think ?