Here we are discussing how to create and call custom popup using Magento 2’s Popup Modal Library.
You should create a module first, then after create a requirejs-config.js file at app/code/CustomVendor/CustomModule/view/frontend/
|
1 2 3 4 5 6 7 8 9 10 |
var config = { paths: { 'myjs': "CustomVendor_CustomModule/js/customfile" }, shim: { 'myjs': { deps: ['jquery'] } } } |
You need to create customfile.js at app/code/CustomVendor/CustomModule/view/frontend/web/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 26 27 28 29 30 |
<script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { type: 'popup', responsive: true, innerScroll: true, buttons: [{ text: $.mage.__('Continue'), class: 'mymodal1', click: function () { this.closeModal(); } }] }; var popup = modal(options, $('#custompopup')); $("#click-here").on('click',function(){ $("#custompopup").modal("openModal"); }); } ); </script> |
Add following code in your phtml file:
|
1 2 3 4 5 6 7 8 |
<div data-mage-init='{"myjs": {}}'> <a href="#" id="click-here">Click Here</a> </div> <div id="custompopup" > This is custom popup using magento popup modal. </div> |