How to Create Popup in Magento 2
Featured In - Magento 2,
Magento 2 makes many things easier as compared to Magento 1, specifically when it comes to popups. In Magento 2 Popup is good to go strategy to attract visitors attention and engage them thoroughly to explore website with more curiosity. Popup offers an instant call to action and thus frequently used. Today we’ll learn to create popup in Magento 2.
Usually, the developers would go through the long process of creating the popup manually and then face difficulty to make it work with different themes. This is because they are unaware of the default modal widget facility available in Magento 2. The use of the modal widget is a shortcut for creating popups! Get the task done with a few lines of code and escape the tedious task, prone to errors, for creating popups.
Method to create popup in Magento 2:
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 | <div class="callfor-popup"> <h2>Simple Modal</h2> </div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function ( $, modal ) { var modaloption = { type: 'popup', modalClass: 'modal-popup', responsive: true, innerScroll: true, clickableOverlay: true, title: 'Simple Modal' }; var callforoption = modal(modaloption, $('.callfor-popup')); $('.callfor-popup').modal('openModal'); } ); </script> |
Implement the above code and the popup is ready to use!
A time saver and easy to use with all Magento themes, the modal widget is the perfect choice to create popup in Magento 2!
Aslo read: How to Add Quick View Popup in Magento 2
The code is easy to implement. However, doubts regarding the popups are welcome in the comments section below. I’d be happy to help.
Hopefully, the post is useful to you. Rate it with 5 stars if you liked it.
Happy Coding!
Pop up
Magento 2 Popup extension enables generating and showcasing popups with the important action to retain visitors’ attention.
10 Comments
How we can set the popup on image
Hello Nikhil,
You can set background image of div in callfor-popup class.
Thank You
Thanks, I used this with simple customization. This helps me a lot.
Hello Mujahidh,
That’s great.
I’m glad that it helps you!
Thank You
Can this modal be called using an image link?
Hello Greg,
Yes. You can put the code on the image click event.
$('.callfor-popup').modal('openModal');Thank you
where do I add this code? thanks
Hello,
Please add this code to phtml file.
Thank you.
Is this possible to create popup left to right directions?
Hello,
Yes, it is possible using CSS.
Thanks.