wake-up-neo.com

Verhindern, dass Bootstrap Modal beim Klicken auf die Außenseite oder Drücken der Escape-Taste verschwinden?

Ich verwende das Twitter-Bootstrap-Modal als Assistentenfenster und möchte verhindern, dass der Benutzer das Fenster schließt, wenn Sie außerhalb des Modals klicken oder die Escape-Taste drücken. Stattdessen möchte ich, dass es geschlossen wird, wenn der Benutzer den Fertigstellen-Button drückt. Wie könnte ich dieses Szenario erreichen?

368

Wenn Sie JavaScript verwenden, dann:

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

und wenn HTML:

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

Funktioniert auch, data-backdrop="static" zum Herausklicken und data-keyboard="false" zum Esc in Ihrem Div-Modus: 

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
212
CesarMiguel

Sie können Direct auch im Bootstrap-Modal verwenden. 

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
43
tarun chotia

Fügen Sie diesem modal einfach data-backdrop="static"- und data-keyboard="false"-Attribute hinzu.

Z.B.

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

Sie können den folgenden Code verwenden

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

um das Standardverhalten zu ändern.

22
Rafael Keller

Ich verwende diese Attribute und es funktioniert, data-keyboard="false" data-backdrop="static"

16
jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});
13
Selva Balaji
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
9
Ramesh kumar

Dieser Code verhindert modales Schließen, wenn Sie außerhalb von modal klicken.

   $(document).ready(function () {
    $('#myModal').modal({
           backdrop: 'static',
           keyboard: false
    })
   })
5
Rohit Parte

Deaktivieren Sie das Klicken außerhalb, aktivieren Sie jedoch das Drücken der Escape-Taste

$ ('# myModal'). modal ({
 Hintergrund: 'statisch', // Dies für Klick außerhalb des Ereignisses deaktivieren 
 keyboard: true // Dies für das Tastaturereignis 
}
5
HoangLong85

Das folgende Skript hat für mich funktioniert:

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});
4
Nabid

Sie sollten die statische Hintergrundtastatur und die falsche Tastatur verwenden. und kann die Schaltfläche zum Schließen mit jQuery deaktivieren oder aus modalem HTML entfernen. Ich hoffe das hilft.

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');
1
Anurag Tiwari

Ihr Code funktioniert, wenn ich auf die Modalität klicke, aber wenn ich das html input -Feld innerhalb des Modal-Body benutze, dann fokussiere den Cursor auf diese Eingabe und drücke dann die esc -Taste, die das Modal geschlossen hat . Klicken Sie auf hier

1
Marudhu Raj

Wenn Sie dies after einrichten müssen, wird der Modal angezeigt, Sie können die @Nabid-Lösung verwenden. Manchmal müssen Sie jedoch die Methode " some " zulassen, um das Modal zu schließen. Angenommen, Sie haben einen Button mit der Klasse really-close-the-modal, der das Modal wirklich schließen sollte, können Sie diesen Code (jquery) verwenden:

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

Dies ist kein wirklich schönes Code-Design, aber es half mir in einer Situation, in der der Modal mit einer Loader-Animation gezeigt wurde, bis eine Ajax-Anforderung zurückkehrte. Erst dann konnte ich wissen, ob der Modal so konfiguriert werden musste, dass er "implizit" verhindert Schließen. Sie können ein ähnliches Design verwenden, um das Schließen des Modal während des Ladens zu verhindern.

0
youen
<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

ich denke, dieser Codepen kann Ihnen helfen verhindern modales Schließen von Css und Bootstrap

0
shubhangi singh
<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

fügen Sie Ihrer Schaltfläche, bei der das Modell geöffnet ist, einfach Datenhintergrund und Daten-Tastaturattribute hinzu.

0