Heim > Web-Frontend > CSS-Tutorial > Wie kann verhindert werden, dass Bootstrap-Modale geschlossen werden, wenn man nach draußen klickt?

Wie kann verhindert werden, dass Bootstrap-Modale geschlossen werden, wenn man nach draußen klickt?

Susan Sarandon
Freigeben: 2024-11-13 02:03:02
Original
914 Leute haben es durchsucht

How to Prevent Bootstrap Modals from Closing When Clicking Outside?

So deaktivieren Sie das modale Schließen durch Klicken außerhalb des Bootstrap-Bereichs

Bei Bootstrap-Modalen kann es zu Unannehmlichkeiten kommen, dass ein modales Schließen unbeabsichtigt erfolgt, wenn Benutzer darauf klicken außerhalb des modalen Fensters. Um dieses Problem zu beheben und die Benutzererfahrung zu verbessern, können Sie diese Funktion entweder global oder speziell für bestimmte Modalitäten deaktivieren.

Globale Deaktivierung

Um das Schließen von Modalitäten durch Klicken außerhalb zu deaktivieren Für alle Modalitäten können Sie die Option „Hintergrund“ im modalen Initialisierungsoptionsobjekt ändern. Indem Sie es auf „statisch“ setzen, verhindern Sie, dass das Modal geschlossen wird, wenn Sie außerhalb seiner Grenzen klicken.

Spezifische modale Deaktivierung

Wenn Sie das modale Schließen selektiv deaktivieren möchten Für bestimmte Modalitäten können Sie entweder JavaScript oder Datenattribute verwenden.

Verwenden JavaScript:

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

Verwenden von Datenattributen:

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
</button>
Nach dem Login kopieren

Durch Hinzufügen des data-backdrop="static"-Attributs deaktivieren Sie den „backdrop ". Darüber hinaus verhindert das Attribut „data-keyboard="false" das Schließen des Modals durch Drücken der „Esc“-Taste.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Bootstrap-Modale geschlossen werden, wenn man nach draußen klickt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage