Deaktivieren Sie das Klicken außerhalb des Bootstrap-Modalbereichs, um das Modal zu schließen.

Question

Ich erstelle eine Bootstrap-Website mit ein paar Bootstrap-'Modals'. Ich versuche, einige der Standardfunktionen anzupassen.

Das Problem ist folgendes; Man kann das Modal durch Klicken auf den Hintergrund schließen. Gibt es eine Möglichkeit, diese Funktion zu deaktivieren? Nur bei bestimmten Modals?

Bootstrap-Modal-Seite

Answer 1

Im Options-Kapitel, auf der von Ihnen verlinkten Seite, können Sie die backdrop-Option sehen. Wenn Sie diese Option mit dem Wert 'static' übergeben, wird verhindert, dass das Modal geschlossen wird.
Wie @PedroVagner in den Kommentaren angemerkt hat, können Sie auch {keyboard: false} übergeben, um das Schließen des Modals durch Drücken von Esc zu verhindern.

Wenn Sie das Modal über js öffnen, verwenden Sie:

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

Wenn Sie Datenattribute verwenden, verwenden Sie:

    Starten Sie das Demo-Modal
 `

Answer 2

Dies ist das einfachste.

Sie können Ihr Modellverhalten definieren, indem Sie data-keyboard und data-backdrop definieren.

Answer 3

Sie können ein Attribut wie dieses verwenden: data-backdrop="static" oder mit JavaScript:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // um das Schließen mit der Esc-Taste zu verhindern (falls gewünscht)
})

Siehe auch diese Antwort: Verhindern, dass das Twitter Bootstrap Modal-Fenster geschlossen wird

Answer 4

In meiner Anwendung verwende ich den folgenden Code, um das Bootstrap-Modal über jQuery anzuzeigen.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });

Answer 5

Fügen Sie diesen Code in den ersten Block Ihres Modal-HTML ein

Bootstrap 4.x

data-keyboard="false" data-backdrop="static"

Boostrap 5.x

data-bs-keyboard="false" data-bs-backdrop="static"

Beispiel:

Dokumentation für Bootstrap 5: https://getbootstrap.com/docs/5.1/components/modal/#options

Enthält ein modal-backdrop-Element. Alternativ geben Sie static für ein Backdrop an, das das Modal nicht beim Klicken schließt.