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

9

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').modal('openModal').on('modalclosed', function() { 
  /*insert code here*/ 
});
9

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');
    }
);
  • 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. – Yogesh Karodiya May 17 '17 at 13:26
2

You can use this:

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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