Argthtjtr

to close bootstrap modal you can pass 'hide' as option to modal method as follow

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

Please take a look at working fiddle here

bootstrap also provide events that you can hook into modal functionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event you can read more about modal methods and events here in Documentation

If none of the above method work, give a id to your close button and trigger click on close button.

$('#modal').modal('toggle'); 

or

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

should work.

But if nothing else works you can call the modal close button directly:

$("#modal .close").click()

this worked for me:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

use this link modal close

$("#your-modal-id").modal('hide');

Running this call via class ($(".my-modal")) won't work.

this one is pretty good and it also works in angular 2

$("#modal .close").click()

My five cents on this one is that I don't want to have to target the bootstrap modal with an id and seeing as there should be only one modal at a time the following should be quite sufficient to remove the modal as toggle could be dangerous:

$('.modal').removeClass('show');

In some circumstances typing error could be the culprit. For instance, make sure you have:

data-dismiss="modal"

and not

data-dissmiss="modal"

Notice the double "ss" in the second example that will cause the Close button that fail.

We can close the modal pop-up in the following ways:

// We use data-dismiss property of modal-up in html to close the modal-up,such as



<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>



 // We can close the modal pop-up through java script, such as



 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>



    $('#openModal').modal('hide'); //Using modal pop-up Id.

    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

   function Delete(){

       var id = $("#dgetid").val();

       debugger

       $.ajax({

           type: "POST",

           url: "Add_NewProduct.aspx/DeleteData",

           data: "{id:'" + id + "'}",

           datatype: "json",

           contentType: "application/json; charset=utf-8",

           success: function (result) {

               if (result.d == 1) {

                   bindData();

                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);

               }

           }

       });

   };

$('.modal.in').modal('hide');

use the above code to hide the backdrop of modal if you are using multiple modal pop in one page.

Using modal.hide would only hide the modal. If you are using overlay underneath the modal, it would still be there. use click call to actually close the modal and remove the overlay.

$("#modalID .close").click()

you can use;

$('#' + $('.modal.show').attr('id')).modal('hide');

Another way of doing this is that first you remove the class modal-open, which closes the modal. Then you remove the class modal-backdrop that removes the grayish cover of the modal.

Following code can be used:

$('body').removeClass('modal-open')

$('.modal-backdrop').remove()  

In my case, main page from where bootstrap modal was triggered started to not responding after using $("#modal").modal('toggle'); way, but started responding in the following way:

$("#submitBtn").on("click",function(){

  $("#submitBtn").attr("data-dismiss","modal");

});

Besides, you can "click" on a 'x', that closes dialog.
E.g.:

$(".ui-dialog-titlebar-close").click();

This code worked perfectly for me to close a modal (i'm using bootstrap 3.3)

$('#myModal').removeClass('in')

I closed modal Programmatically with this trick

Add a button in modal with data-dismiss="modal" and hide the button with display: none. Here is how it will look like

<div class="modal fade" id="addNewPaymentMethod" role="dialog">

  <div class="modal-dialog">

   .

   .

   .

   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>

  </div>

</div>

Now when you want to close modal Programmatically just trigger a click event on that button, which is not visible to user

In Javascript you can trigger click on that button like this:

document.getElementById('close-modal').click();

This works well

$(function () {

   $('#modal').modal('toggle');

});

However, when you have multiple modals stacking on top one another it is not effective, so instead , this works

data-dismiss="modal"