Within the Magento 2 framework, there’s a vast array of tools, widgets and snippets to take advantage of whilst developing or maintaining a site. Despite this, it’s quite common to see Magento 2 sites not making use of these.

This can lead to many cases of reinventing, or to be more precise in this case, “re-implementing” the wheel. For example, a site may include its own version of jQuery UI within their theme – yet Magento 2 ships with jQuery UI out-of-the-box. You’re free to use it as you see fit, you just need to “require” it in the scripts you need.

Keeping with the jQuery UI example, if you were looking to use one of the jQuery UI features – in this case the popup modal – why not use native Magento 2 functionality to achieve this? Let’s have a look at how that might be achieved.

Let’s say we have the following button:


<button id="modal-btn">Click me</button>

Once this is clicked, we want the modal to open. To achieve this, we need to do the following:

  • Create the HTML / content of the modal.
  • In our JS, ensure we’re requiring both jQuery and the modal-specific jQuery UI widget.
  • Set our options for the modal (popup effect or slide-in, etc).
  • Initialise the modal and bind the button to the toggling of the modal.


Create the HTML / content of the modal

Within your page, create a container and assign it an ID.


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

We’ll need the wrapping container’s ID (“modal-content”) in a moment.

Require jQuery and modal-specific jQuery UI widget

We now need to require both jQuery and jQuery UI. To do this, within your JS script add the following:




<script type="text/javascript">
	 require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {
                         // Your JS
	});
</script>

Set our options for the modal (popup effect or slide-in, etc)

Before we initialise the modal itself, let’s set the options for it. Within your JS, create a variable


var options = {
    	type: 'popup', // popup or slide
    	responsive: true, // true = on smaller screens the modal slides in from the right
    	title: 'Please Login or Register',
       	buttons: [{ // Add array of buttons within the modal if you need.
        		text: $.mage.__('Dismiss & Continue'),
        		class: 'modal-close',
        		click: function () {
            			this.closeModal(); // This button closes the modal
        		}
    	}]
};

There are a lot of options you can set, a full list can be found here: https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/widgets/widget_modal.html

Initialise the modal and bind the button to the toggling of the modal

We now need to initialise the modal itself, then bind its’ display to the toggling of the button we created earlier.

Initialise the modal:


var popup = modal(options, $('#modal-content'));

Bind the button to the modal:


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

Finishing off

Once all of the above is done, your script should look roughly as follows:


<script type="text/javascript">
    require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {
        var options = {
            type: 'popup', // popup or slide
            responsive: true, // true = on smaller screens the modal slides in from the right
            title: 'Modal main title',
            buttons: [{ // Add array of buttons within the modal if you need.
                text: $.mage.__('Dismiss & Continue'),
                class: '',
                click: function () {
                    this.closeModal(); // This button closes the modal
                }
            }]
        };

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

A screenshot of this in action is below:

Magento2 Modal