Back to Top

How To Call Model Popup In Magento 2

Updated 28 February 2024

How To Call Model Popup In Magento 2- Here I am going to explain you how you can call model popup in magento2.

First of all create your popup form data in your phtml file.

<div id="custom-model-popup">
	<dl>
		<dt>Definition list</dt>
		<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
		aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
		commodo consequat.</dd>
		<dt>Lorem ipsum dolor sit amet</dt>
		<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
		aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
		commodo consequat.</dd>
	</dl>
	<form action="/my-handling-form-page" method="post">
		<div>
			<label for="name">Name:</label>
			<input type="text" id="name" name="user_name">
		</div>
		<div>
			<label for="mail">E-mail:</label>
			<input type="email" id="mail" name="user_mail">
		</div>
		<div>
			<label for="msg">Message:</label>
			<textarea id="msg" name="user_message"></textarea>
		</div>
	</form>
</div>

Now include javascript code.

<script>
	require([
		"jquery",
		"Magento_Ui/js/modal/modal"
	], function($, modal){
		var options = {
			type: 'popup',
			responsive: true,
			innerScroll: true,
			title: "Model Popup Heading...", //write your popup title 
			buttons: [{
				text: $.mage.__('Submit'),
				class: 'button',
				click: function () {
					console.log('Do something here......');
					// Do something here........
				}
			}]
		};
		var popupdata = $('<div />').append($('#custom-model-popup'));
		modal(options, popupdata);
		popupdata.modal('openModal');
	});
</script>

So the output of this snippet will be same as below screenshot.
response in console

In this way you can call model popup and if you have any query then comment below.

Searching for an experienced
Magento 2 Company ?
Find out More
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home