Ich erstelle ein modales Fenster mit Twitter Bootstrap. Das Standardverhalten ist, wenn Sie außerhalb des Modalbereichs klicken, wird das Modal automatisch geschlossen. Ich möchte das deaktivieren - dh das Modalfenster nicht schließen, wenn Sie außerhalb des Modals klicken.
Kann jemand dafür jQuery-Code freigeben?
jquery
twitter-bootstrap
modal-dialog
mouseclick-event
user1296175
quelle
quelle
Antworten:
Ich glaube, Sie möchten den Hintergrundwert auf statisch setzen . Wenn Sie vermeiden möchten, dass das Fenster bei Verwendung der EscTaste geschlossen wird, müssen Sie einen anderen Wert festlegen.
Beispiel:
ODER wenn Sie JavaScript verwenden:
quelle
Setzen Sie einfach die
backdrop
Eigenschaft auf'static'
.Möglicherweise möchten Sie die
keyboard
Eigenschaft auch auf festlegen ,false
da dadurch verhindert wird, dass das Modal durch Drücken der EscTaste auf der Tastatur geschlossen wird.myModal
ist die ID des div, das Ihren modalen Inhalt enthält.quelle
backdrop
undkeyboard
werden hier in ihrer Dokumentation im Abschnitt Optionen erwähnt .Sie können diese Attribute auch in die Modaldefinition selbst aufnehmen:
quelle
Wenn Sie das modale Fenster bereits initialisiert haben, möchten Sie möglicherweise die Optionen mit zurücksetzen
$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})
, um sicherzustellen, dass die neuen Optionen angewendet werden.quelle
Überschreiben Sie das Bootstrap-Ereignis 'hide' von Dialog und beenden Sie das Standardverhalten (um den Dialog zu entsorgen).
Bitte beachten Sie das folgende Code-Snippet:
In unserem Fall funktioniert es gut.
quelle
Ja, Sie können es so machen:
quelle
Ein bisschen wie die Antwort von @ AymKdn, aber dies ermöglicht es Ihnen, die Optionen zu ändern, ohne das Modal neu zu initialisieren.
Oder wenn Sie mehrere Optionen ausführen müssen, ist JavaScript
with
hier hilfreich!Wenn das Modal bereits geöffnet ist, werden diese Optionen erst beim nächsten Öffnen des Modals wirksam .
quelle
Fügen Sie einfach diese beiden Dinge hinzu
Es wird jetzt so aussehen
Dadurch wird die Escape-Schaltfläche sowie der Klick auf eine beliebige Stelle deaktiviert und ausgeblendet.
quelle
Sie können das Click-to-Close-Verhalten des Hintergrunds deaktivieren und dies zum Standard für alle Ihre Modalitäten machen, indem Sie dieses JavaScript zu Ihrer Seite hinzufügen (stellen Sie sicher, dass es ausgeführt wird, nachdem jQuery und Bootstrap JS geladen wurden):
quelle
Wie D3VELOPER sagt, wird es durch den folgenden Code behoben:
Ich benutze sowohl jquery als auch bootstrap und arbeite einfach
removeData('modal')
nicht.quelle
Das Beste, was ich gefunden habe, ist, diesen Code zum Link hinzuzufügen
quelle
Falls jemand von Google hierher kommt, um herauszufinden, wie verhindert werden kann, dass jemand ein Modal schließt, vergessen Sie nicht, dass sich oben rechts im Modal eine Schaltfläche zum Schließen befindet, die entfernt werden muss.
Ich habe CSS verwendet, um es auszublenden:
Beachten Sie, dass mit "display: none;" wird beim Erstellen des Modals überschrieben, verwenden Sie das also nicht.
quelle
Wenn Sie die Funktion bedingt deaktivieren möchten
backdrop click closing
. In der folgenden Zeile können Sie diebackdrop
Option zurstatic
Laufzeit festlegen .Bootstrap v3.xx.
Bootstrap v2.xx
Dadurch wird verhindert, dass ein bereits instanziiertes Modell mit der
backdrop
Optionfalse
( Standardverhalten ) geschlossen wird.quelle
Sie können das Standardverhalten des modalen Popups mithilfe der folgenden Codezeile festlegen:
quelle
Das ist heutzutage sehr einfach. Einfach hinzufügen:
In Ihrem Modalteiler.
quelle
Nun, dies ist eine andere Lösung, nach der einige von euch suchen könnten (wie ich es war ..)
Mein Problem war ähnlich, die Modalbox wurde geschlossen, während der Iframe geladen wurde, also musste ich die Modalentlassung deaktivieren, bis der Iframe vollständig geladen war, und dann wieder aktivieren.
Die hier vorgestellten Lösungen funktionierten nicht zu 100%.
Meine Lösung war folgende:
Daher verhindere ich vorübergehend, dass der Modal geschlossen wird mit:
Aber mit var is_loading wird das Schließen nach dem Laden des Iframes wieder aktiviert.
quelle
quelle
Um den Hintergrundstatus in Bootstrap 4.1.3 zu aktualisieren, nachdem das Modal angezeigt wurde, haben wir die folgende Zeile aus dem Bootstrap-Modal-Wrapper- Plugin verwendet. Plugin Repository Code Referenz .
quelle