Ich mache eine Bootstrap-Website mit ein paar Bootstrap-Modals. Ich versuche, einige der Standardfunktionen anzupassen.
Problem ist das; Sie können das Modal schließen, indem Sie auf den Hintergrund klicken. Gibt es überhaupt eine Möglichkeit, diese Funktion zu deaktivieren? Nur für bestimmte Modalitäten?
javascript
css
twitter-bootstrap
modal-dialog
Egghead
quelle
quelle
Antworten:
Im Kapitel Optionen sehen Sie auf der von Ihnen verlinkten Seite die
backdrop
Option. Wenn Sie diese Option mit value übergeben,'static'
wird das Schließen des Modals verhindert.Wie @PedroVagner auf Kommentare hingewiesen hat, können Sie auch übergeben
{keyboard: false}
, um das Schließen des Modals durch Drücken zu verhindernEsc .Wenn Sie das Modal mit js öffnen, verwenden Sie:
Wenn Sie Datenattribute verwenden, verwenden Sie:
quelle
$('#modal').modal('show');
Hope setzen. Hoffe, das hilft!Dies ist die einfachste
Sie können Ihr modales Verhalten definieren, indem Sie die Datentastatur und den Datenhintergrund definieren.
quelle
data-backdrop="static"
Option auf die Modaldefinition und nicht auf die Auslösetaste, die das Modal öffnet, wie in anderen Antworten angegeben, hat bei mir funktioniert.Sie können ein Attribut wie das folgende verwenden:
data-backdrop="static"
oder mit Javascript:Siehe auch diese Antwort: Das Schließen des modalen Fensters des Twitter-Bootstraps darf nicht geschlossen werden
quelle
In meiner Anwendung verwende ich den folgenden Code, um das Bootstrap-Modal über jQuery anzuzeigen.
quelle
Sie können verwenden
um das Standardverhalten zu ändern.
quelle
Es gibt zwei Möglichkeiten, das Klicken außerhalb des Bootstrap-Modellbereichs zu deaktivieren, um modal- zu schließen.
mit Javascript
Verwenden des Datenattributs im HTML-Tag
quelle
Schau dir das an ::
quelle
Eine weitere Option, wenn Sie nicht wissen, ob das Modal bereits geöffnet wurde oder noch nicht, und Sie die Modaloptionen konfigurieren müssen:
Ändern Sie die Optionen in _config
quelle
_setEscapeEvent()
statt sein.escape()
?Die Lösung, die für mich funktioniert, ist die folgende:
Hintergrund: Deaktiviert das Ereignis "Klick außerhalb"
Tastatur: Deaktiviert das Scape-Schlüsselwortereignis
quelle
Versuchen Sie dies, während meiner Anwendungsentwicklung ... Ich bin auch auf das Problem gestoßen, dass Standardwerte für ein Modellattribut =>
data-keyboard="true"
, => sinddata-backdrop="non static"
Hoffe das wird dir helfen!
quelle
Versuche dies:
quelle
Keine dieser Lösungen hat bei mir funktioniert.
Ich habe ein Modal mit allgemeinen Geschäftsbedingungen, das ich zwingen wollte, zu überprüfen, bevor ich fortfahre. Die Standardeinstellungen "statisch" und "Tastatur" gemäß den Optionen machten es unmöglich, die Seite nach unten zu scrollen, da die allgemeinen Geschäftsbedingungen einige Seiten umfassen log, statisch war nicht die Antwort für mich.
Also habe ich stattdessen die Klickmethode auf dem Modal gelöst, mit dem folgenden konnte ich den gewünschten Effekt erzielen.
$('.modal').off('click');
quelle
TLDR
backdrop: 'static'
https://getbootstrap.com/docs/3.3/javascript/#modals-options
quelle
quelle
Wenn Sie @ ng-bootstrap verwenden, verwenden Sie Folgendes:
Komponente
Vorlage
Dieser Code wurde auf Winkel 9 getestet mit:
"@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",
"bootstrap": "^ 4.4.1",
quelle
Verwenden Sie diese Option, wenn Sie den äußeren Klick für alle Modalitäten mit jQuery deaktivieren möchten. Fügen Sie dieses Skript nach jQuery zu Ihrem Javascript hinzu.
quelle
Sie können dies auch ohne JQuery tun, wie folgt:
quelle
Fügen Sie das unten stehende CSS entsprechend Ihrer gewünschten Bildschirmbreite hinzu.
quelle