8
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.

2

6 Answers 6

17

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*/ 
});
1
  • It works but with this error TypeError: Cannot read property 'remove' of null Nov 18, 2019 at 11:12
11

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');
    }
);
1
  • 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. May 17, 2017 at 13:26
9
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.

1
  • awesome, worked like a charm
    – Wolfack
    Nov 24, 2021 at 10:05
3

You can use this:

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

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

1
options = {
    ...,
    modalCloseBtnHandler: function() {
         // you code

         this.closeModal();
    },
};

Try to add 'modalCloseBtnHandler' in your options

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.