How to close a modal in Magento 2

Question

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?

Answer 1

Just use single line followed by element :

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

Answer 2

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

Answer 3

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";
        }

    });       

});