How do I close a modal window after AJAX success

bootstrap modal auto close after success
open popup on ajax success
how to open bootstrap modal in ajax success
how to close modal popup automatically
how to close modal popup after submit in jquery
how to prevent modal from closing after form submit
modal('hide') not working
modal popup close button

I have a button which opens a modal but I have prevented the modal close by clicking background or ESC key.

My button looks like this:

<button data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false">Click </button>

How do I close this modal after $.ajax success using jQuery?

I have done a few tests - the modal has closed but the background gets locked, and I cannot do anything until I refresh the page


To close bootstrap modal you can pass 'hide' as option to modal method as follows.

$('#CompanyProfile').modal('hide');

Use this code inside ajax success.

Fiddle Demo

Close Bootstrap Modal On form Submit, 2 Answers. To close popup model there is method closeModal() . After you get success response you can simply a. modal("closeModal"); to close your modal. Close (Hide) jQuery Dialog Modal Popup after AJAX Call Success (Completed) Inside the jQuery document ready event handler, the jQuery UI Dialog Modal Popup plugin is applied to the HTML DIV and the jQuery UI Dialog Modal Popup box is shown. When the Button is clicked a jQuery AJAX call is made to the WebMethod and the Loading GIF image is displayed.


Adding this solution since there doesn't seem to be a generic method listed.

If you wish to close any modal on success, but don't wish to hand-craft each $.ajax call to the server, you could use the following :

$('.modal form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serializeObject(),
        contentType: 'application/json',
        beforeSend: function(xhr){xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")},
        success: function(data) {
            console.log(data.success);
            if(data.success===1) {
                // loop through all modal's and call the Bootstrap
                // modal jQuery extension's 'hide' method
                $('.modal').each(function(){
                    $(this).modal('hide');
                });
                console.log('success');
            } else {
                console.log('failure');
            }
        }
    });
});

As an aside, if you are looking to use the code above as copy/paste, you will need the following which takes form data and converts it into JSON for posting to the server, or change the $(this).serializeObject() to $(this).serialize() :

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    o = { request: o };
    return o;
};

Reference: Bootstrap JS Modal

Close Bootstrap Modal, Here Mudassar Ahmed Khan has explained with an example, how to close (hide) jQuery UI Modal Popup box after AJAX Call is successful  I want to close bootstrap-modal after ajax call. For, this purpose i call "$ (myid).modal ('close')". This event is called but not in a proper way. Likewise, the modal box is gone but an overlay of grey colour is not fade out some reason.


You can try something like

 $( document ).ready(function() {               
        $(".btn").button().click(function(){         // button click

                $('#CompanyProfile').modal('show')   // Modal launch
                     $.ajax({
                              type: "POST",
                              url: "url",
                              data:{data:data},
                              cache: false,                         
                              success: function(data) { 
                                                  $('.text').html(data); 
                                                 }
                   })                          
         });   
  });

Make sure the modal is launched only once

Open (Show) jQuery Dialog Modal Popup after AJAX Call Success, Have Bootstrap Modal open after Ajax loads data <div class="modal hide" id="​pracavailable" role="dialog"> <div class="modal-dialog modal-lg" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button data: {serviceid:serviceid}, dataType: 'json', success: function (data)  I'm loading in the content of a modal with ajax. I have a button that submits the modal form and is suppose to close the modal when it's done processing the ajax submit so it can update a table at the bottom of the page. It's not closing the modal after I update the table and call $('modal-container').modal('hide'); This modal contains a table


You can try something like below. Untested but you'll get the idea.

$.ajax({
  url: 'yourscript.php',
  data: $('form#yourForm').serialize(),
  type: 'post'
}).done(function(response) { 
  // trigger modal closing here since ajax is complete.
});

Uncaught TypeError: $(…).modal is not a function jquery, <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-​labelledby="myModalLabel" aria-hidden="true">. <div class="modal-header">. Find answers to How to close jquery dialog after ajax call is I am looking for a way to close a jQuery dialog once an AJAX call is completed. mytitle, modal


I define my modal :

  <div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

then I use create function :

var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");

}

My idea is after ajax success is will call function StopLoadingAnimation what will trigger event click on element btnCloseModal ( It like you click button btnCloseModal when you closing modal )

How to close the popup modal after showing the success message , Bootstrap Modal is a popup box which is customizable and responsive. class="​btn btn-default" data-dismiss="modal">Close</button> </div> </div> Append response in .modal-body on AJAX successfully callback and  I need to close the popup modal in magento 2, In my js I have given button as false, I can open the popup, but falied to close it after showing the response messagePlease provide me a solution to close popup modal after showing the response message Js for reference


Close (Hide) jQuery Dialog Modal Popup after AJAX Call Success , bootstrap modal''>close after submit how to open bootstrap modal in ajax success modal popup close button bootstrap 4 modal ajax modal('hide') not working Find out why Close. Popup Modal: Part II - Submitting via ajax Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery - Duration: 16:05. Create a popup window MVC easy - Duration: 7:56.


Have Bootstrap Modal open after Ajax loads data, When the AJAX call completes I close the dialog. However if I throw an alert in the AJAX success or error handler after closing the spinner  Bootstrap Modal, ajax submit, and close on submit. GitHub Gist: instantly share code, notes, and snippets.


Bootstrap Modal, ajax submit, and close on submit · GitHub, Example of loading content from another page via jQuery AJAX and populating the Bootstrap modal. Open 1 modal, and then open another after form submit. Steps3: Handle Modal Submit with jQuery Ajax Here in form_process.js , we have handled modal form submit using jQuery Ajax and post form data to server end to feedback.php . Also display response data on page after modal form process.