Schließen Sie Bootstrap Modal

Ich habe ein modales Bootstrap-Dialogfeld, das ich zunächst anzeigen möchte. Wenn der Benutzer dann auf die Seite klickt, wird es ausgeblendet. Ich habe folgendes:

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

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

Das Modal wird anfangs angezeigt, schließt jedoch nicht, wenn Sie außerhalb des Modals klicken. Außerdem ist der Inhaltsbereich nicht ausgegraut. Wie kann ich das Modal zunächst anzeigen lassen und dann schließen, nachdem der Benutzer außerhalb des Bereichs geklickt hat? Und wie kann ich den Hintergrund wie in der Demo abblenden lassen?

Setzen modal('toggle')stattmodal(toggle)

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

Um das Bootstrap- Modal zu schließen , können Sie 'hide' als Option an die Modal-Methode wie folgt übergeben

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

Bitte werfen Sie hier einen Blick auf die funktionierende Geige

Bootstrap bietet auch Ereignisse, die Sie in die modale Funktionalität einbinden können. Wenn Sie beispielsweise ein Ereignis auslösen möchten, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist , können Sie das Ereignis hidden.bs.modal verwenden. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in Dokumentation

Wenn keine der oben genannten Methoden funktioniert, geben Sie Ihrer Schaltfläche zum Schließen eine ID und lösen Sie einen Klick auf die Schaltfläche zum Schließen aus.

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

oder

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

sollte arbeiten.

Wenn nichts anderes funktioniert, können Sie die Schaltfläche zum Schließen des Modals direkt aufrufen:

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

das hat bei mir funktioniert:

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

Verwenden Sie diesen Link modal schließen

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

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

Versuche dies

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

Dieser ist ziemlich gut und funktioniert auch in Winkel 2

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

Meine fünf Cent in diesem Fall sind, dass ich nicht auf das Bootstrap-Modal mit einer ID abzielen möchte und da es jeweils nur ein Modal geben sollte, sollte das Folgende völlig ausreichen, um das Modal zu entfernen, da das Umschalten gefährlich sein könnte ::

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

Unter bestimmten Umständen kann ein Tippfehler der Schuldige sein. Stellen Sie zum Beispiel sicher, dass Sie:

data-dismiss="modal"

und nicht

data-dissmiss="modal"

Beachten Sie das doppelte "ss" im zweiten Beispiel, das dazu führt, dass die Schaltfläche "Schließen" fehlschlägt.

Wir können das modale Popup auf folgende Arten 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.

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

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

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

Sie können verwenden;

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

Die Verwendung von modal.hide würde nur das Modal ausblenden. Wenn Sie Overlay unter dem Modal verwenden, ist es immer noch vorhanden. Verwenden Sie Click Call, um das Modal tatsächlich zu schließen und das Overlay zu entfernen.

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

Eine andere Möglichkeit besteht darin, zuerst die Klasse modal-open zu entfernen, wodurch das Modal geschlossen wird. Dann entfernen Sie den Klassen-Modal-Hintergrund, der die graue Abdeckung des Modals entfernt.

Der folgende Code kann verwendet werden:

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

Ich habe Modal Programmatisch mit diesem Trick geschlossen

Fügen Sie eine Schaltfläche in modal mit hinzu data-dismiss="modal"und verbergen Sie die Schaltfläche mit display: none. 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>

Wenn Sie nun Modal Programmatisch schließen möchten, lösen Sie einfach ein Klickereignis auf dieser Schaltfläche aus, das für den Benutzer nicht sichtbar ist

In Javascript können Sie einen Klick auf diese Schaltfläche wie folgt auslösen:

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

Dieser Code hat perfekt funktioniert, um ein Modal zu schließen (ich verwende Bootstrap 3.3).

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

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

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

Das funktioniert gut

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

Wenn jedoch mehrere Modale übereinander gestapelt sind, ist dies nicht effektiv. Stattdessen funktioniert dies

data-dismiss="modal"

Nach einigen Tests stellte ich fest, dass für das Bootstrap-Modal einige Zeit gewartet werden muss, bevor das $(.modal).modal('hide')nach dem Ausführen ausgeführt wird $(.modal).modal('show'). Und ich fand in meinem Fall, dass ich mindestens 500 Millisekunden Intervall zwischen den beiden brauche.
Das ist also mein Testfall und meine Lösung:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Sie können diese Referenz sehen, aber wenn dieser Link entfernt wurde, lesen Sie diese Beschreibung:

Rufen Sie ein Modal mit der ID myModal mit einer einzelnen Zeile JavaScript auf:

$('#myModal').modal(options)

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data- an , wie in data-background = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang. Sie kehren zum Anrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet. Außerdem wird ein Methodenaufruf für eine Übergangskomponente ignoriert.

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation.

.modal (Optionen)

Aktiviert Ihren Inhalt als Modal. Akzeptiert ein optionales Optionsobjekt.

$('#myModal').modal({
   keyboard: false
})

.modal ('umschalten')

Schaltet ein Modal manuell um. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das Ereignis "used.bs.modal" oder "hidden.bs.modal" auftritt).

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

.modal ('show')

Öffnet manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich angezeigt wurde (dh bevor das Ereignis "used.bs.modal" auftritt).

$('#myModal').modal('show')

.modal ('verstecken')

Versteckt manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das Ereignis hidden.bs.modal auftritt).

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

.modal ('handleUpdate')

Passen Sie die Position des Modals manuell neu an, wenn sich die Höhe eines Modals ändert, während es geöffnet ist (dh falls eine Bildlaufleiste angezeigt wird).

$('#myModal').modal('handleUpdate')

.modal ('entsorgen')

Zerstört das Modal eines Elements.

Veranstaltungen

Die modale Klasse von Bootstrap macht einige Ereignisse sichtbar, um sich in die modale Funktionalität einzubinden. Alle Modalereignisse werden auf das Modal selbst (dh auf das **) ausgelöst. Typ Beschreibung

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Außerdem können Sie auf ein 'x' "klicken", wodurch der Dialog geschlossen wird. Z.B:

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

In meinem Fall habe ich eine Schaltfläche verwendet, um das Modal 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 das Modal (das die ID = 'my-modal-to-show' hat) in meinem Code zu schließen, rufe ich diese Funktion auf (in Angular Typoskript):

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

Wenn ich $ (modalId) .modal ('hide') aufrufe, 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>

Manchmal funktioniert die Lösung nicht, so dass Sie die In-Klasse ordnungsgemäß entfernen und die CSS-Anzeige hinzufügen müssen: keine manuell.

$("#modal").removeClass("in");
$("#modal").css("display","none");