Schließen von Twitter Bootstrap modalen Fenstern unterbinden

Question

Ich erstelle ein modales Fenster mit Twitter Bootstrap. Das Standardverhalten ist, wenn Sie außerhalb des modalen Bereichs klicken, wird das modale Fenster automatisch geschlossen. Ich möchte das deaktivieren, d. h. das modale Fenster nicht schließen, wenn Sie außerhalb des modalen Bereichs klicken.

Kann jemand jQuery-Code teilen, dies zu tun?

Answer 1

Ich glaube, Sie wollen die Kulissenwert à statique . Wenn Sie vermeiden wollen, dass sich das Fenster schließt, wenn Sie die Esc Schlüssel, müssen Sie einen anderen Wert festlegen.

Beispiel:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

ODER wenn Sie JavaScript verwenden:

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

Answer 2

Stellen Sie einfach die backdrop Eigenschaft zu 'static' .

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

Sie können auch die Option keyboard Eigenschaft zu false denn dadurch wird verhindert, dass das Modal durch Drücken der Taste Esc Taste auf der Tastatur.

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

myModal ist die ID des Divs, das Ihren modalen Inhalt enthält.

Answer 3

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

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

Answer 4

Wenn Sie das modale Fenster bereits initialisiert haben, dann sollten Sie die Optionen mit $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) um sicherzustellen, dass die neuen Optionen übernommen werden.

Answer 5

Überschreiben Sie das Bootstrap-Ereignis "hide" von Dialog und beenden Sie sein Standardverhalten (um den Dialog zu entsorgen).

Bitte sehen Sie sich das folgende Codefragment an:

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

       e.preventDefault();
   });

In unserem Fall funktioniert das gut.