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> |
If you want get query string params in controller file,...
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62866dff1de32811393611/] Create...
You can try below code to change local date to...
Step 1: First you need to add registration.php file in...
Step1 : Override message.js in current theme file on the...