Verhindern Sie, dass das modale Fenster von Twitter Bootstrap geschlossen wird

Ich erstelle ein modales Fenster mit Twitter Bootstrap. Wenn Sie außerhalb des modalen Bereichs klicken, wird das modale automatisch geschlossen. Ich möchte das deaktivieren – dh das modale Fenster nicht schließen, wenn ich außerhalb des Modals klicke.

Kann jemand jQuery-Code teilen, um dies zu tun?

Ich glaube, dass Sie den Hintergrundwert auf statisch festlegen möchten. Wenn Sie vermeiden möchten, dass das Fenster bei Verwendung der Esc- Taste geschlossen wird, müssen Sie einen anderen Wert festlegen.

Beispiel:

 

ODER wenn Sie JavaScript verwenden:

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

Setzen Sie einfach die backdrop auf 'static' .

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

Möglicherweise möchten Sie die keyboard auf false festlegen, da dadurch verhindert wird, dass das Modal geschlossen wird, indem Sie die Esc- Taste auf der Tastatur drücken.

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

myModal ist die ID des Div, das den modalen Inhalt enthält.

Sie können diese Attribute auch in die Modaldefinition selbst aufnehmen:

  

Wenn Sie das modale Fenster bereits initialisiert haben, sollten Sie die Optionen mit $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) zurücksetzen, um sicherzugehen es wird die neuen Optionen anwenden.

Überschreiben Sie das Bootstrap-Ereignis “hide” von Dialog und stoppen Sie das Standardverhalten (um den Dialog zu entfernen).

Bitte beachten Sie das folgende Code-Snippet:

  $('#yourDialogID').on('hide.bs.modal', function(e) { e.preventDefault(); }); 

Es funktioniert in unserem Fall gut.

Ja, du kannst es so machen:

  

Ein bisschen wie @ AymKdn’s Antwort, aber das erlaubt Ihnen, die Optionen zu ändern, ohne das Modal neu zu initialisieren.

 $('#myModal').data('modal').options.keyboard = false; 

Oder wenn Sie mehrere Optionen benötigen, ist JavaScript with hier praktisch!

 with ($('#myModal').data("modal").options) { backdrop = 'static'; keyboard = false; } 

Wenn das Modal bereits geöffnet ist, werden diese Optionen erst beim nächsten Öffnen des Modals wirksam.

Füge einfach diese zwei Dinge hinzu

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

Es wird jetzt so aussehen

  

Es wird die Escape-Taste und auch den Klick irgendwo deaktivieren und ausblenden.

Sie können das Click-to-Close-Verhalten des Hintergrunds deaktivieren und als Standard für alle Ihre Mods festlegen, indem Sie dieses JavaScript zu Ihrer Seite hinzufügen (stellen Sie sicher, dass es ausgeführt wird, nachdem jQuery und Bootstrap JS geladen wurden):

 $(function() { $.fn.modal.Constructor.DEFAULTS.backdrop = 'static'; }); 

Wie D3VELOPER sagt, triggers der folgende Code es:

 $('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 

Ich benutze sowohl jquery & bootstrap und einfach removeData('modal') funktionieren nicht.

Das Beste, was ich gefunden habe, ist, diesen Code zum Link hinzuzufügen

   < -- Div -->  

Wenn jemand von Google kommt, um herauszufinden, wie man verhindern kann, dass jemand ein Modal schließt, vergiss nicht, dass oben rechts neben dem Modal auch eine Schaltfläche zum Schließen vorhanden ist, die entfernt werden muss.

Ich habe etwas CSS verwendet, um es zu verstecken:

 #Modal .modal-header button.close { visibility: hidden; } 

Beachten Sie, dass “display: none;” Wird beim Erstellen des Modales überschrieben, also nicht verwenden.

Wenn Sie die function zum backdrop click closing bedingt deaktivieren möchten. Sie können die folgende Option verwenden, um die backdrop während der Laufzeit auf ” static zu setzen.

Bootstrap v3.xx

 jQuery('#MyModal').data('bs.modal').options.backdrop = 'static'; 

Bootstrap v2.xx

 jQuery('#MyModal').data('modal').options.backdrop = 'static'; 

Dadurch wird verhindert, dass ein bereits instanziiertes Modell mit backdrop auf false ( das Standardverhalten ) gesetzt wird.

Sie können das Standardverhalten des modalen Popups festlegen, indem Sie die folgende Codezeile verwenden:

  $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static'; 

Das ist heutzutage sehr einfach. Einfach hinzufügen:

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

In deinem Modalteiler.

Nun, das ist eine andere Lösung, die einige von euch suchen könnten (wie ich war ..)

Mein Problem war ähnlich, die modale Box wurde geschlossen, während der Iframe, den ich hatte, geladen wurde, also musste ich die Modal-Fehlanzeige deaktivieren, bis der Iframe fertig geladen wurde, und dann wieder aktivieren.

Die hier vorgestellten Lösungen funktionierten nicht zu 100%.

Meine Lösung war das:

 showLocationModal = function(loc){ var is_loading = true; if(is_loading === true) { is_loading = false; var $modal = $('#locationModal'); $modal.modal({show:true}); // prevent Modal to close before the iframe is loaded $modal.on("hide", function (e) { if(is_loading !== true) { e.preventDefault(); return false } }); // populate Modal $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){ is_loading = true; }); }}; 

Also verhindere ich vorübergehend das Schließen des Modal mit:

 $modal.on("hide", function (e) { if(is_loading !== true) { e.preventDefault(); return false } }); 

Aber mit der Variablen is_loading wird wieder das Schließen ermöglicht, nachdem der Iframe geladen wurde.

     

Um den Hintergrundzustand in Bootstrap 4.1.3 zu aktualisieren, nachdem das Modal angezeigt wurde, verwendeten wir die folgende Zeile vom Bootstrap-Modal-Wrapper- Plugin. Plugin Repository-Code-Referenz .

 $("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");