magento 2 js modal popup close event

Question

require(
 [
 'jquery',
 'Magento_Ui/js/modal/modal'
 ],
 function(
 ,ドル
 modal
 ) {
 var options = {
 type: 'popup',
 responsive: true,
 innerScroll: true,
 title: 'Title',
 buttons: [{
 text: $.mage.__('Proceed'),
 class: '',
 click: function () {
 /* some stuff */
 this.closeModal();
 }
 }]
 };
 var popup = modal(options,$('#popup-modal')); 
 $('#popup-modal').modal('openModal');
 }
 );

Popup works fine but I want to execute some code when the popup closes.

Thanks for the answers,

Popup can be closed by clicking x button or escape key.

But I don't think adding multiple events for click and keypress is a good idea.

• Rakesh Jesadiya: what are you want to doing on click of close button?
• Suresh Chikani: Check this one : magento.stackexchange.com/questions/128199/…

Answer 1

You don't have to extend the modal.

You simply have to listen for the 'modalclosed' event on the DOM element on which the modal had been invoked. In fact the modal() function returns this element which makes the code trivial.

$('#popup-modal').on('modalclosed', function() { 
 /*insert code here*/ 
});

• insoftservice: It works but with this error TypeError: Cannot read property 'remove' of null

Answer 2

You have to extend widget function _close in your custom module.

Follow below steps for achieve your task:

First create requirejs-config.js with code:

var config = {
map: {
 '*': {
 custommodal: 'Vendor_Modulename/js/custom',
 }
}

};

Create your js file in your web folder:

 define([
 'jquery',
 'jquery/ui',
 'Magento_Ui/js/modal/modal'
 ],
 function($){
 $.widget('custommodel', $.mage.modal, {
 _close: function () {
 /*write your custom code here */ 
 console.log('hello world');
 /* below function is used for call parent function */
 this._super();
 }
 });
 return $.custommodel;
 }
 );

Call this js file into your phtml file:

require(
 [
 'jquery',
 'custommodal'
 ],
 function(
 ,ドル
 custommodal
 ) {
 var options = {
 type: 'popup',
 responsive: true,
 innerScroll: true,
 title: 'Title',
 buttons: [{
 text: $.mage.__('Proceed'),
 class: '',
 click: function () {
 /* some stuff */
 this.closeModal();
 }
 }]
 };
 var popup = custommodal(options,$('#popup-modal')); 
 $('#popup-modal').custommodal('openModal');
 }
);

• Yogesh Karodiya: both files have different purpose and functionality in first file we are just extending core function and in second one we are using that function. So how could i merge both file in one.

Answer 3

closed: function () {
 //do the magic here
 }

I know I am late but this can help you in default way Put this code in your options array.

• Wolfack: awesome, worked like a charm

Answer 4

You can use this:

$('.action-close').click(function(){
 <your code...>
});

Answer 5

If you want to close an model then you should use class closeModal() of model widget Like:

 $('#popup-modal').modal('closeModal');

As you want to execute some code when the popup closes by clicking on close button.

Then I guess you have already doing right way .On click() function at /* some stuff */ You need your code.

 click: function () {
 /* some stuff */
 this.closeModal();
 }

Also class: '' You can set your button class Like class: '' .

If you want to execute some code when your closeModal(); that is not possible. Then You should create custom widget by follow modal magento default modela

Answer 6

options = {
 ...,
 modalCloseBtnHandler: function() {
 // you code
 this.closeModal();
 },
};

Try to add 'modalCloseBtnHandler' in your options