magento 2 js modal popup close event
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*/
});
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');
}
);
You can use this:
$('.action-close').click(function(){
<your code...>
});