How to Open a Popup in Magento 2 When a User Clicks a Button

magento2-popup

A Popup is playing a crucial role in any website. Whether it is a CMS site or an E-commerce site. Popup is useful when you want to display a subscription form, notice, or promotional message on your site.

Today we will see how to add a Popup in Magento 2 using third-party modules as well as using code in your custom theme.

Adding a Popup Using Modules

There are a couple of modules available in the Magento marketplace to integrate a popup. Here we have listed a few modules among them one is free.

We all know free extensions are not providing great support. If your client is concern about the support you should go with one of the following paid extensions.

Popup by Magebird (Free)
Popup by Magenest (Paid)
Popup by Bss Commerce (Paid)
Popup by Meetanshi (Paid)

Open a Popup in Magento 2 programmatically

Sometimes you just want to open a popup to display a simple note or promotional message, Nothing else. For those kinds of small tasks, install a third-party module is not a good idea. It can lead to performance issues on other pages.

Here we will see how to open a popup programmatically in your theme. There are two ways to open a popup. Here I have demonstrated both ways.

Open a Popup in Magento 2 Using data-bind Attribute

In your custom theme’s .phtml file add a below code.

<div data-bind="mageInit: {
        'Magento_Ui/js/modal/modal':{
            'type': 'popup',
            'title': 'My Title',
            'trigger': '[data-trigger=trigger]',
            'responsive': true,
             buttons: []
        }}">
    <div class="content">
        <p>Content goes here</p>
    </div>
</div>
<div id="click-section" class="click-section">
    <button type="button" class="action primary" data-trigger="trigger">
        <span data-bind="i18n: 'Click Me'"></span>
    </button>
</div>
Open a Popup in Magento 2 Using raw Javascript code

As this method is easy and much familiar, many developers prefer this way. In your custom theme’s .phtml file add a below code.

<div class="content" style="display:none;>
  <p>Content goes here</p>
</div>
<div id="click-section" class="click-section">
    <button type="button" class="action primary">
        <span data-bind="i18n: 'Click Me'"></span>
    </button>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function ($, modal) {

            var options = {
                type: 'popup',
                responsive: true,
                title: $.mage.__('My Title'),
                buttons: []
            };

            var popup = modal(options, $('.content'));
            $("#click-section").on('click',function(){
                $(".content").modal("openModal");
            });

    });
</script>

Conclusion

We learned different ways of adding a popup in Magento 2. If you are using the popup on many pages, you should go with third-party modules. If you are using the popup in only a few pages, you should add it programmatically.

Want to ask a question or leave a comment?

Leave a Comment

(0 Comments)

All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

Was this post helpful? Please support Us!

Follow us on twitter or Like us on facebook.

 


Want to Increase your Magento 2 Development Knowledge?

If Yes! Then Subscribe to our newsletter below and get weekly development posts to your inbox.
Subscribe Here
SUBSCRIBE NOW
close-link

To Avoid Spam Downloads, We Want Your Email

We will send you download link right
away. Please submit form below.
SEND ME DOWNLOAD LINK
Close