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.
