Failed to close the popup modal form in magento 2

Question

I have created Popup modal form, the form is successfully submitted and showing response, but after showing response I need to close the popup modal but failed to close the popuup modal

js file

 define([
    "jquery",
    "jquery/ui",
    "Magento_Ui/js/modal/modal"

],
        function ($) {
            "use strict";
            // Review form 
            var xxx = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: false,
                title: "aaa",
                modalClass: "popup-center",
                clickableOverlay: true,

            };
           var abc = $('#form-div-id').modal(xxx);
            $(".link").click(function () {
                abc.modal("openModal");
            });

            return function (config) {
                $('#review-form').on("click", "#review-submit", function () {
                    var form_data = $("#review-form").serialize();
                    var reviewurl = config.url;
                    $.ajax({
                        url: reviewurl,
                        type: 'POST',
                        // Pass the submitted form data to Controller
                        data: form_data,
                        success: function (response) {

                            var returnedData = JSON.parse(response);
                            if (returnedData.status === 'success')
                                $("#success").html(returnedData.messages);
                            else
                                $("#error").html(returnedData.messages);


                        },
                        error: function (response) {
                            var returnedData = JSON.parse(response);
                            $("#error").html(returnedData.messages);
                        }

                    });
                    var close = this;
                    setTimeout(function () {
                        close.closeModal();
                    }, 3000);
                   return false;

                });
            };

        });

Answer 1

In your code you have used this:

var close = this;

Where 'this' will represent $('#review-form') object. While you have initiated modal for $('#form-div-id'). So This is the reason that's why modal is not closing, closeModal method belongs to modal($('#form-div-id')) object not form object.

Please use model like this:

1. Initialize model like

define([ "jquery", "Magento_Ui/js/modal/modal", "jquery/ui"],

function ($,modal) {

2. Assign to Dom elements like this:

var abc = modal(xxx, $('#form-div-id'));

Where xxx is modal options.

3. And call modal open and close like this:

abc.openModal();

And closing

abc.closeModal();

Please note:

close modal should be called before return of function please use alert method to put before close modal and debug is alert is coming or not while closing.

Answer 2

just add condition in success section like below:

 define([
    "jquery",
    "jquery/ui",
    "Magento_Ui/js/modal/modal"

],
        function ($) {
            "use strict";
            // Review form 
            var xxx = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: false,
                title: "aaa",
                modalClass: "popup-center",
                clickableOverlay: true,

            };
           var abc = $('#form-div-id').modal(xxx);
            $(".link").click(function () {
                abc.modal("openModal");
            });

            return function (config) {
                $('#review-form').on("click", "#review-submit", function () {
                    var form_data = $("#review-form").serialize();
                    var reviewurl = config.url;
                    $.ajax({
                        url: reviewurl,
                        type: 'POST',
                        // Pass the submitted form data to Controller
                        data: form_data,
                        success: function (response) {

                            var returnedData = JSON.parse(response);
                            if (returnedData.status === 'success')
                                $("#success").html(returnedData.messages);
                              //to close form
                              $('#review-form').modal('closeModal');
                            else
                                $("#error").html(returnedData.messages);


                        },
                        error: function (response) {
                            var returnedData = JSON.parse(response);
                            $("#error").html(returnedData.messages);
                        }

                    });
                    var close = this;
                    setTimeout(function () {
                        close.closeModal();
                    }, 3000);
                   return false;

                });
            };

        });

Hope, this will help you some extend.

Thanks!

Answer 3

var abc = $('#form-div-id').modal(productreview);
            $(".link").click(function () {
                abc.modal("openModal");
            });
    return function (config) {
        $('#review-form').on("click", "#review-submit", function () {
            var form_data = $("#review-form").serialize();
            var reviewurl = config.url;
            $.ajax({
                url: reviewurl,
                type: 'POST',
                // Pass the submitted form data to Controller
                data: form_data,
                success: function (response) {

                    var returnedData = JSON.parse(response);
                    if (returnedData.status === 'success')
                        $("#success").html(returnedData.messages);
                    else
                        $("#error").html(returnedData.messages);
                },
                error: function (response) {
                    var returnedData = JSON.parse(response);
                    $("#error").html(returnedData.messages);
                }
            });
            //But failed to close
            var close = this;
            setTimeout(function () {
                close.closeModal();
            }, 3000);
            return false;
        });

    };

You have set closemodel() function after function return false so your call is not executing.

You need to set return false at last in your js.