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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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
1 2 3 4 5 6 7 | var config = { map: { '*': { mymodal: 'Ht_Mymodule/js/mymodal' } } }; |
Now, add below code in your phtml file.
1 2 3 4 5 6 7 8 9 | <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!!
Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!
Leave a Reply