Das Schließen des modalen Fensters von Twitter Bootstrap darf nicht geschlossen werden

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?

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:

<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
});

Setzen Sie einfach die backdropEigenschaft auf 'static'.

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

Möglicherweise möchten Sie die keyboardEigenschaft auch auf festlegen , falseda dadurch verhindert wird, dass das Modal durch Drücken der EscTaste auf der Tastatur geschlossen wird.

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

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

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

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

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.

Ü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:

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

       e.preventDefault();
   });

In unserem Fall funktioniert es gut.

Ja, Sie können es so machen:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Ein bisschen wie die Antwort von @ AymKdn, aber dies ermöglicht es Ihnen, die Optionen zu ändern, ohne das Modal neu zu initialisieren.

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

Oder wenn Sie mehrere Optionen ausführen müssen, ist JavaScript withhier hilfreich!

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ügen Sie einfach diese beiden Dinge hinzu

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

Es wird jetzt so aussehen

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Dadurch wird die Escape-Schaltfläche sowie der Klick auf eine beliebige Stelle deaktiviert und ausgeblendet.

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):

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

Wie D3VELOPER sagt, wird es durch den folgenden Code behoben:

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

Ich benutze sowohl jquery als auch bootstrap und arbeite einfach removeData('modal')nicht.

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

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

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:

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

Beachten Sie, dass mit "display: none;" wird beim Erstellen des Modals überschrieben, verwenden Sie das also nicht.

Wenn Sie die Funktion bedingt deaktivieren möchten backdrop click closing. In der folgenden Zeile können Sie die backdropOption zur staticLaufzeit festlegen .

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 der backdropOption false( Standardverhalten ) geschlossen wird.

Sie können das Standardverhalten des modalen Popups mithilfe der folgenden Codezeile festlegen:

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

Das ist heutzutage sehr einfach. Einfach hinzufügen:

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

In Ihrem Modalteiler.

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:

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;
     });
}};

Daher verhindere ich vorübergehend, dass der Modal geschlossen wird mit:

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

Aber mit var is_loading wird das Schließen nach dem Laden des Iframes wieder aktiviert.

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

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 .

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