Magento 2 – How to Create and Call Modal Popup Widget

In this post I am going to explain how to create and call modal popup widget in Magento 2.

First, you need to create a “mymodal.js” file at below path.

Path: app/code/<vendor>/<module>/view/frontend/web/js/mymodal.js

define([
    'jquery',
    'Magento_Ui/js/modal/modal'
], function(
    $,
    modal
) {
    var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        buttons: [{
            text: $.mage.__('Continue'),
            class: 'my-modal',
            click: function () {
                this.closeModal();
            }
        }]
    };

    var popup = modal(options, $('#modal-content'));
    $("#open-btn").on('click',function(){
        $("#modal-content").modal("openModal");
    });
});

After creating js file, create a “requirejs-config.js” at file below path and add/call js in it.

Path: app/code/<vendor>/<module>/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            mymodal: 'Ht_Mymodule/js/mymodal'
        }
    }
};

Now, add below code in your phtml file.

<div data-mage-init='{"mymodal": {}}'>
    <a class="action primary" href="#" id="open-btn">Open Modal</a>
</div>

<div style="display: none">
    <div id="modal-content" >
        Modal content goes here...
    </div>
</div>

Thats it. Enjoy Magento 2!!

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!