1

I have a modal created when user clicks on Add to Cart button and there are couple of products that are shown in that modal and their corresponding Add to Cart buttons. Now I want to close the Modal when user adds the product from that modal. How can I achieve this? I have _hide() function in that modal.

//modal-form.js

 define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function($) {
        "use strict";
        //creating jquery widget
        $.widget('mage.modalForm', {
            options: {
                modalForm: '#modal-lens-form',
                modalButton: '.open-modal-form'
            },
            _create: function() {
                this.options.modalOption = this._getModalOptions();
                this._bind();
                this._hide();
            },
            _getModalOptions: function() {
                /**
                 * Modal options
                 */
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: 'Select Product'
                    // ,
                    // buttons: [{
                    //     text: $.mage.__('Continue'),
                    //     class: '',
                    //     click: function () {
                    //         this.closeModal();
                    //     }
                    // }]
                };

                return options;
            },
            _bind: function(){
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalForm;

                $(document).on('click', this.options.modalButton,  function(){

                    if ($('#product_addtocart_form').valid()) { //Open modal only if validation passes on base product form
                        //Initialize modal
                        $(modalForm).modal(modalOption);
                        //open modal
                        $(modalForm).trigger('openModal');
                    }    
                });
            },
            _hide: function(){
                $(this.options.modalForm).hide();
            }
        }



        );

        return $.mage.modalForm;
    }
);

When the product is successfully added to the cart, I want to add code in my custom catalog-add-to-cart.js file to automatically close that modal. How to call above hide function, or closeModal() from different js file?

2

Just use single line followed by element :

$("#popup-modal").modal("closeModal");   
1

I have created modal to popup images

require(["jquery"], function($) 
{
    $('.myImg').on('click', function() {
        // Get the modal
        var modal = document.getElementById('myModal'); 
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");

        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;


        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() { 
          modal.style.display = "none";
        }

    });       

});
0

Here is your _hide() function, you can use this code to close modal.

_hide: function(){
    //this.options.modalForm is your popup id
    $(this.options.modalForm).modal('closeModal');
}

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.