it-swarm.com.de

Schließen Sie das modulare Fenster von Twitter Bootstrap nicht

Ich erstelle ein modales Fenster mit Twitter Bootstrap. Wenn Sie außerhalb des Modalbereichs klicken, wird das Modal 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 dafür freigeben?

520
user1296175

Ich glaube, Sie möchten den Hintergrundwert auf statisch setzen. Wenn Sie vermeiden möchten, dass sich das Fenster bei Verwendung von schließt, klicken Sie auf Esc müssen Sie einen anderen Wert einstellen.

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

Setzen Sie einfach die Eigenschaft backdrop auf 'static'.

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

Möglicherweise möchten Sie auch die Eigenschaft keyboard auf false setzen, da dies verhindert, dass das Modal durch Drücken der Taste geschlossen wird Esc Taste auf der Tastatur.

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

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

309
Nirmal

Sie können diese Attribute auch in die modale Definition einschließen:

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

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

46
AymKdn

Überschreiben Sie das Bootstrap-Ereignis 'hide' von Dialog und beenden Sie das Standardverhalten (um das Dialogfeld zu löschen).

Bitte sehen Sie sich den folgenden Code-Ausschnitt an:

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

       e.preventDefault();
   });

In unserem Fall funktioniert es gut.

33
Sam Jha

Ja, das kannst du so machen:

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

Ein bisschen wie @ AymKdns Antwort, aber damit können Sie die Optionen ändern, ohne den Modal neu zu initialisieren.

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

Oder wenn Sie mehrere Optionen benötigen, ist JavaScript's with hier hilfreich!

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

Wenn der Modal bereits geöffnet ist, werden diese Optionen erst wirksam, wenn das nächste Mal der Modal geöffnet wird.

22
Chris Barr

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">

Es wird die Escape-Taste und auch das Klicken irgendwo deaktiviert und ausgeblendet.

12
Vivek

Sie können das Click-to-Close-Verhalten des Hintergrunds deaktivieren und dies als Standard für alle Ihre Modals festlegen, indem Sie dieser Seite JavaScript hinzufügen (stellen Sie sicher, dass es nach dem Laden von jQuery und Bootstrap JS ausgeführt wird):

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

Wie D3VELOPER sagt, löst der folgende Code es auf:

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

Ich verwende sowohl Jquery als auch Bootstrap und removeData('modal') funktioniert einfach nicht.

6

Das Beste, was ich gefunden habe, ist, diesen Code dem 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>
4
user3634719

Falls jemand von Google hierher kommt, um herauszufinden, wie jemand verhindern kann, dass ein Modal geschlossen wird, vergessen Sie nicht, dass es oben rechts neben dem Modal auch eine Schaltfläche zum Schließen gibt, 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 Modals überschrieben. Verwenden Sie das also nicht.

2
Drew

Wenn Sie die backdrop click closing-Funktion bedingt deaktivieren möchten. In der folgenden Zeile können Sie die Option backdrop zur Laufzeit auf static 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 instantiiertes Modell mit backdrop-Option, die auf false (das Standardverhalten) gesetzt ist, geschlossen wird.

2

Sie können das Standardverhalten des modalen Popup-Fensters mithilfe der folgenden Codezeile festlegen:

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

Das ist heutzutage sehr einfach. Einfach hinzufügen:

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

In Ihrem modalen Teiler.

2
jfindley
<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>
1
shiva krishna

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

Mein Problem war ähnlich, die Modalbox wurde geschlossen, während der Iframe, den ich im Inneren hatte, geladen wurde. Daher musste ich die Modal-Deaktivierung deaktivieren, bis der Iframe vollständig geladen wurde.

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

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

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

Aber das var is_loading wird das Schließen wieder aktivieren, nachdem der Iframe geladen wurde.

1
miguelmpn

Um den Hintergrundstatus in Bootstrap 4.1.3 zu aktualisieren, nachdem die Modalanzeige angezeigt wurde, verwendeten wir die folgende Zeile aus Bootstrap-Modal-Wrapper plugin. Plugin Repository-Code-Referenz .

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