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

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.