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.

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*/ 
});

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');
    }
);

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.

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