Schließen Bootstrap Modal

Question

Ich habe ein Bootstrap-Modal-Dialogfeld, das ich initial anzeigen möchte, und wenn der Benutzer auf die Seite klickt, verschwindet es. Ich habe Folgendes:

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

        ×
        Fehler:

        Bitte korrigieren Sie die folgenden Fehler:

Das Modal wird zunächst angezeigt, schließt jedoch nicht, wenn außerhalb des Modals geklickt wird. Außerdem wird der Inhaltsbereich nicht grau hinterlegt. Wie kann ich das Modal initial anzeigen lassen, dann schließen, nachdem der Benutzer außerhalb des Bereichs geklickt hat? Und wie kann ich den Hintergrund grau hinterlegen wie im Demo?

Answer 1

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

Das Aufrufen dieses Befehls über die Klasse ($(".my-modal")) funktioniert nicht.

Answer 2

Dieser ist ziemlich gut und funktioniert auch in Angular 2

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

Answer 3

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

Rufen Sie ein Modalfenster mit der ID myModal mit einer einzigen JavaScript-Zeile auf:

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

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Für Datenattribute fügen Sie den Optionnamen an data- an, wie in data-backdrop="".

|-----------|-------------|--------|---------------------------------------------|
| Name      | Typ         | Default| Beschreibung                                |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean oder| true   | Enthält ein modal-backdrop Element.          |
|           | den String  |        | Alternativ, geben Sie 'static' für einen     |
|           | 'static'    |        | Hintergrund an, der das Modal nicht beim     |
|           |             |        | Klicken schließt.                           |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Schließt das Modal, wenn die Escape-Taste    |
|           |             |        | gedrückt wird.                              |
|           |             |        |                                             |
| focus     | boolean     | true   | Setzt den Fokus auf das Modal beim          |       
|           |             |        | Initialisieren.                             |
|           |             |        |                                             |
| show      | boolean     | true   | Zeigt das Modal beim Initialisieren an.      |
|-----------|-------------|--------|---------------------------------------------|

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang. Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet, aber bevor er endet. Darüber hinaus wird ein Methodenaufruf bei einem übergehenden Element ignoriert.

Sehen Sie unsere JavaScript-Dokumentation für weitere Informationen.

.modal(options)

Aktiviert Ihren Inhalt als Modal. Akzeptiert ein optionales Optionsobjekt.

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

Passen Sie die Position des Modals manuell an, wenn sich die Höhe eines Modals ändert, während es geöffnet ist (z.B. wenn ein Scrollbalken erscheint).

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

.modal('dispose')

Zerstört das Modal eines Elements.

Ereignisse

Die Modal-Klasse von Bootstrap bietet einige Ereignisse zum Einhaken in die Modal-Funktionalität. Alle Modalereignisse werden am Modal selbst ausgelöst (d.h. am **).

|----------------|--------------------------------------------------------------|
| Ereignistyp    | Beschreibung                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | Dieses Ereignis wird sofort ausgelöst, wenn die Instanz       |
|                | **show**-Methode aufgerufen wird. Wenn es durch einen Klick   |
|                | verursacht wird, steht das angeklickte Element als Eigenschaft|
|                | **relatedTarget** des Ereignisses zur Verfügung.             | 
|                |                                                              |
| shown.bs.modal | Dieses Ereignis wird ausgelöst, wenn das Modal für den Nutzer  |
|                | sichtbar gemacht wurde (wartet auf den Abschluss von CSS     |
|                | Übergängen). Wenn es durch einen Klick verursacht wird, steht|
|                | das angeklickte Element als Eigenschaft **relatedTarget** des| 
|                | Ereignisses zur Verfügung.                                    |
|                |                                                              |
| hide.bs.modal  | Dieses Ereignis wird sofort ausgelöst, wenn die **hide**      |
|                | Methode aufgerufen wurde.                                     |
|                |                                                              |
| hidden.bs.modal| Dieses Ereignis wird ausgelöst, wenn das Modal für den Nutzer  |
|                | vollständig ausgeblendet wurde (wartet auf den Abschluss von  |
|                | CSS Übergängen).                                              |
|----------------|--------------------------------------------------------------|

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

Answer 4

Meine Meinung dazu ist, dass ich nicht möchte, dass ich das Bootstrap-Modal mit einer ID ansprechen muss und da zu jeder Zeit nur ein Modal vorhanden sein sollte, ist es ausreichend, das Modal wie folgt zu entfernen, da das Umschalten gefährlich sein könnte:

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

Answer 5

In einigen Fällen könnte ein Tippfehler der Übeltäter sein. Stellen Sie zum Beispiel sicher, dass Sie Folgendes haben:

data-dismiss="modal"

und nicht

data-dissmiss="modal"

Beachten Sie das doppelte "ss" im zweiten Beispiel, das dazu führen wird, dass die Schaltfläche "Schließen" nicht funktioniert.