🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How to Create Popup in Magento 2

By Sanjay JethvaUpdated on May 22, 2025 1 min read

Magento 2 makes many things easier as compared to Magento 1, specifically when it comes to popups. Magento 2 Popup is a good-to-go strategy to attract visitors’ attention and engage them thoroughly to explore the website with more curiosity. Popup offers an instant call to action and is thus frequently used. Today we’ll learn to create a popup in Magento 2.

Usually, the developers would go through the long process of creating the popup manually and then face difficulty in making 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.

Code to create popup in Magento 2

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 a popup in Magento 2! You can also add a quick view popup in Magento 2.

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.