How To Create A Magento 2 Popup On Click Using Modal Widget

Read the below article to learn how to create a Magento 2 popup on click using modal widget.

Popup is one of the most powerful advertising methods in any eCommerce store. Thus, the popup is almost indispensable for communicating critical messages and encouraging visitors to take action.

If you are looking for a solution to create popups with 0 fees and you have some coding knowledge, then the good news is you totally can take advantage of all the utilities that Magento supports to create your own popups for free.

So in this post, we are going to explain step-by-step: Magento 2 create modal popup.

What Is A Modal Widget?

The Magento modal widget implements a secondary window that opens on top of the main window. It contains the overlay and modal content. 

The modal widget configuration can:

• Configuring as popup or slide
• Controlling stack of modal widgets
• Setting buttons for the action bar

Below, we will show you in detail Magento 2 create popup modal.

How To Create A Popup Magento 2 On Click Using Modal Widget

First of all, we need to create a button that, when clicked, the popup will display.

<button id="modal-btn">Open Modal</button>

Then follow these steps:

Create content for popup

<div id="modal-content">
    <div class="modal-inner-content">
        <h2>Modal Title</h2>
        <p>Modal content.....</p>
    </div>
</div>

Use Magento 2 modal widget/ Magento 2 modal popup on click

Now we need to require both jQuery and jQuery UI. To do this, add the following code in your JS script:

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($, modal) { 
            // Your JS
        }
    );
</script>

Set options for the modal widget

var options = {
     type: 'popup',
     responsive: true,
      innerScroll: true,
     title: 'Pop-up title',
      buttons: [{
         text: $.mage.__('Close'),
         class: 'modal-close',
         click: function (){
             this.closeModal();
         }
     }]
};

Initialize modal widget

modal(options, $('#modal-content'));

Then we create an event when clicking the button will display the popup:

$("#modal-btn").on('click',function(){
    $("#modal-content").modal("openModal");
});

Finish

After finish all of the above steps are done, your script should look like this:

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($, modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Pop-up title',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: 'modal-close',
                    click: function (){
                        this.closeModal();
                    }
                }]
            };

            modal(options, $('#modal-content'));
            $("#modal-btn").on('click',function(){
                $("#modal-content").modal("openModal");
            });
        }
    );
</script>

And the result will be like the following picture:

The Better Solution To Create Magento 2 Popup

Even though using Magento 2 modal popup on click is a good method, it’s definitely not the best.

For once, you can barely customize the popup to make it more eye-catching and less annoying to your visitors.

Hence, hereby we want to introduce you to the best solution to create Magento 2 Popup:

 

This extension allows you to create different popups without limitation.

Depending on your marketing target, you can choose one of five highly-converting popup templates and customize it to be your own:

• Contact Form to gather leads and build relationships with your customers.
• Hot Deals to show product listings to boost sales.
• Newsletter Subscription to build & grow your email list.
• Age Verification to ensure you target the right customer.
• Social Sharing to let customers share their experiences on social media.

It also supports you in targeting selected customer groups and store views to display the popup to optimize the sales margin.

This extension enables you to set up the popup schedule too. You can set the start date and end date for the popup depending on when you run the campaign.

You can also set up display rules based on customer behavior.

And there are many more amazing features.

Full list of features: 

• Create many different types of popup
• Set up display rule for the popup
• Target the popup to specific customer groups and store views.
• Display the popup on pages up to 6 positions
• Provide 6 fascinating animations for the popup
• Config valid date, the cookie expires, timer for the popup
• Responsive for all devices

Increase your conversion rate and avoid 5+ Mistakes From Popup In Magento 2 That Kill Your Conversions

Conclusion

In this article, we have shown you how to create a Magento 2 modal popup on click.

We hope this blog is helpful and good luck to you!

BSS Commerce is one of the leading Magento extension providers and Magento 2 web development services in the world. With experienced and certified Magento developers, we commit to bringing high-quality products and services to optimize your business effectively. Furthermore, we offer FREE Installation – FREE 1-year Support and FREE Lifetime Update for every Magento extension.

CONTACT NOW to let us know your problems. We are willing to support you every time.