Read the below article to learn how to create a Magento 2 modal popup on click.
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?
Table of Contents
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 a popup or slide
- Controlling stack of modal widgets
- Setting buttons for the action bar
Below, we will show you in detail how to create a popup modal in Magento 2.
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:
Step 1: Create content for popup
<div id="modal-content"> <div class="modal-inner-content"> <h2>Modal Title</h2> <p>Modal content.....</p> </div> </div>
Step 2: Use the 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>
Step 3: 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();
}
}]
};
Step 4: 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");
});
Step 5: 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 a Magento 2 modal popup:
Exclusive: Get 5% OFF the module price now – Enter code: BSS5 at checkout!
Magento 2 Popup by BSS Commerce allows administrators to create and display popups on their online store. Store owners can choose from five pre-set templates to encourage customers to purchase. This extension also supports you in targeting selected customer groups and store views to display the popup to optimize the sales margin. You can also schedule the popup’s start and end dates depending on your promotion campaign.
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, the display time 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.
NEW: We have launched Trello’s Product Roadmap to keep you updated on our latest product versions. Share your feedback and suggestions for Magento solutions to help us improve your experience here. With our Product Roadmap, you can also request updates or compatibility for your desired modules or suggest a new one to enhance your website.
>> Explore NOW!
