All ecommerce websites have one purpose and that is to gain more sales. One way to achieve this is by focusing the user’s attention on a particular action on the page so that they click on it.
A Modal Window helps with this by making the whole page darker and highlighting the modal window in the center. Its structure includes a content container, a title with the page content, a close control “X” and a CTA button with text ‘Cancel,’ ‘Close,’ or ‘Submit.’
Adding the modal widget in Magento 2 is quite easier. It can be implemented under the <Magento_Ui_module_dir>/view/base/web/js/modal/modal.js source.
Let’s learn how to implement this custom modal popup using Magento 2 modal widget.
I have used RequireJS and a simple JS component that makes the implementation of the modal widget to the page easier. After installing this module, the main container of the page will contain a button that pops up the modal window.
Scale Your Magento 2 Store With Ease
One-Click Magento installation with your own managed hosting solution.
First, create a configuration file module.xml in $Magento2Root/app/code/Cloudways/M2Modal/etc/ directory and add the following code:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Cloudways_M2Modal" setup_version="1.0.0" />
</config>
Now, create the file registration.php in the root directory of the module $Magento2Root/app/code/Cloudways/M2Modal/ and insert the following code into it:
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Cloudways_M2Modal',
__DIR__
);
Create a layout and a template file, so that the directories look like this:
$Magento2Root/app/code/Cloudways/M2Modal/view/frontend/layout/
$Magento2Root/app/code/Cloudways/M2Modal/view/frontend/templates/
Now, create a default.xml file inside the layout folder of your module and add the following code to it:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
<body>
<referenceContainer name="main">
<block class="Cloudways\M2Modal\Block\Example" template="example.phtml" />
</referenceContainer>
</body>
</page>
In the code above, you will see a block defined in the main container, which extends the Cloudways\M2Modal\Block\Example block (a block that we will create later).
Now, add the example.phtml file in templates folder and insert the following code to it:
<div id="modal-content">
<?php echo $block->getContent(); ?>
</div>
<button id="example-modal-button" data-mage-init='{"example-modal": {"target": "#modal-content"}}'>
Open modal
</button>
Here, use the data-mage-init='{“example-modal”: {“target”: “#modal-content”}}’ attribute (a declarative notation) to add a JavaScript component in example.phtml template.
Now, add a JS file to initialize and execute the component.
Create a file example-modal.js in $Magento2Root/app/code/Cloudways/M2Modal/view/frontend/web/js/ directory and add following code to it:
define([
"jquery", "Magento_Ui/js/modal/modal"
], function($){
var ExampleModal = {
initModal: function(config, element) {
$target = $(config.target);
$target.modal();
$element = $(element);
$element.click(function() {
$target.modal('openModal');
});
}
};
return {
'example-modal': ExampleModal.initModal
};
}
);
You will notice that the example-modal.js code uses the define function at the top. This function is from RequireJS, which is an array of dependency. In the above example, example-modal.js uses jquery and Magento_Ui/js/modal/modal .
The example-modal.js file should be declared in the requirejs-config.js file because this config file is used by RequireJS.
So, create the requirejs-config.js file in $Magento2Root/app/code/Cloudways/M2Modal/view/frontend/ directory and add the following code to it:
var config = {
map: {
'*': {
'example-modal': 'Cloudways_M2Modal/js/example-modal'
}
}
};
As the Cloudways\M2Modal\Block\Example block is already defined in the layout file, create the Example.php block file in the $Magento2Root/app/code/Cloudways/M2Modal/Block/ folder with the following code in it:
<?php
namespace Cloudways\M2Modal\Block;
class Example extends \Magento\Framework\View\Element\Template
{
public function getContent() : string
{
return 'Dummy content';
}
}
Finally,
- Enable the module,
- Run setup upgrade command
- Clear the Magento 2 cache
That’s it.
The window looks like this:
Conclusion
I hope the above tutorial will help you implement custom modal window in Magento 2 easily.
Magento 2 offers an easy way of creating custom UI behaviors. You can also extend the usability of other jQuery widgets and Knockout libraries.
If you have any question on adding Magento 2 Modal widget module, feel free to ask it in the comments below.
FAQs
What is Modal in Magento?
The Magento Modal displays secondary window over main primary (main) window by making the whole page darker and display the modal widget window.
Customer Review at 
“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”
Stefan [Management Consultant]
Fayyaz Khattak
Fayyaz, a passionate Motorbike tourist, works as a Team Lead — Magento Community at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. You can contact him at [email protected]
