Schließen Sie Bootstrap Modal

zum Schließen von bootstrap modal können Sie 'hide' als Option an die modale Methode übergeben, wie folgt

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

Bitte schauen Sie sich das Arbeiten an fiddle here

bootstrap stellt auch Ereignisse bereit, die Sie in die Funktionalität von modal einbinden können, z. B. wenn Sie ein Ereignis auslösen möchten, wenn der Modal nicht mehr für den Benutzer sichtbar ist. Sie können hidden.bs.modal event verwenden Weitere Informationen über modale Methoden und Ereignisse finden Sie hier in Documentation

Wenn keine der oben genannten Methoden funktioniert, geben Sie der Schließen-Schaltfläche eine ID, und klicken Sie auf die Schließen-Schaltfläche.

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

oder 

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

sollte arbeiten.

Wenn nichts anderes funktioniert, können Sie die modale Schließen-Schaltfläche direkt aufrufen:

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

das hat für mich funktioniert:

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

verwenden Sie diesen Link modal close

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

Das Ausführen dieses Aufrufs über die Klasse ($(".my-modal")) funktioniert nicht.

dieses ist ziemlich gut und es funktioniert auch in eckig 2 

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

Meine fünf Cents bei diesem Punkt sind, dass ich nicht mit einer id auf den Bootstrap-Modal zielen möchte. Da es nur jeweils einen Modal geben sollte, sollte das Folgende ausreichend sein, um den Modal zu entfernen, da Toggle gefährlich sein kann :

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

In einigen Fällen kann ein Tippfehler die Ursache sein. Stellen Sie beispielsweise sicher, dass Sie Folgendes haben:

data-dismiss="modal"

und nicht 

data-dissmiss="modal"

Beachten Sie das doppelte "ss" im zweiten Beispiel, bei dem die Schaltfläche "Schließen" fehlschlägt.

Wir können das modale Pop-Up auf folgende Weise schließen:

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

Versuchen Sie dies

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

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

verwenden Sie den obigen Code, um den Modal-Hintergrund auszublenden, wenn Sie mehrere Modal-Popups auf einer Seite verwenden.

sie können verwenden;

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

Bei Verwendung von modal.hide wird nur das Modal ausgeblendet. Wenn Sie Overlay unter dem Modal verwenden, ist es immer noch vorhanden. Verwenden Sie den Click-Aufruf, um das Modal zu schließen und die Überlagerung zu entfernen.

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

Eine andere Möglichkeit, dies zu tun, besteht darin, dass Sie zuerst die Klasse modal-open entfernen, wodurch die modal geschlossen wird. Dann entfernen Sie den Klassen-Modal-Hintergrund, der die gräuliche Abdeckung des Modals entfernt. 

Folgender Code kann verwendet werden:

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

Dieser Code hat perfekt zum Schließen eines Modals (ich benutze Bootstrap 3.3)

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

In meinem Fall begann die Hauptseite, von der aus Bootstrap-Modal ausgelöst wurde, nach der Verwendung von $("#modal").modal('toggle'); way nicht mehr zu reagieren, jedoch auf folgende Weise:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Ich habe programmatisch mit diesem Trick geschlossen

Fügen Sie eine Schaltfläche in modal mit data-dismiss="modal" hinzu und blenden Sie die Schaltfläche mit display: none aus. So wird es aussehen

<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>

Nun, wenn Sie modal programmgesteuert schließen möchten, einfach ein Klickereignis auslösen auf dieser Schaltfläche, die für Benutzer nicht sichtbar ist

In Javascript können Sie den Button wie folgt auslösen:

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

Außerdem können Sie auf ein 'x' "klicken", um den Dialog zu schließen. Z.B.:

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

In meinem Fall habe ich eine Schaltfläche verwendet, um die Modalität anzuzeigen 

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Um also in meinem Code das Modal zu schließen (das hat die id = 'my-modal-to-show'), nenne ich diese Funktion (in Angular TypeScript):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Wenn ich $ (modalId) .modal ('hide') anrufe, funktioniert es nicht und ich weiß nicht warum

PS .: in meinem Modal habe ich dieses Button-Element auch mit der .close-Klasse codiert 

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

Das funktioniert gut

$(function () {
   $('#modal').modal('toggle');
});

Wenn Sie jedoch mehrere Modale übereinander stapeln, ist dies nicht effektiv. Stattdessen funktioniert dies

data-dismiss="modal"