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

549

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?

user1296175
quelle
1
Möglicherweise haben Sie einen durchaus gültigen Grund dafür (und es gibt wahrscheinlich viele andere). Es ist jedoch anzumerken, dass UX-Überlegungen im Allgemeinen davon abraten würden - die meisten Benutzer erwarten, dass durch Klicken aus einem Modal der Inhalt "unten" in den Vordergrund gerückt wird.
Trevor
32
@ Trevor Das ist wie das Gegenteil von Modal .
Rawling
11
Was ist, wenn sich im Hintergrund eine Seite befindet, die nur aktiviert werden kann, wenn sich der Benutzer zuerst anmeldet? Durch Klicken auf die modale Schaltfläche OK wird der Benutzer zur Anmeldeseite weitergeleitet. Wenn der Benutzer nur klicken kann, bedeutet dies, dass der Benutzer die Anmeldeseite überspringt und nur ohne Anmeldung auf die Seite zugreift. All Hell Break Loose
Jumper rbk
5
@ Trevor Ich sehe überhaupt keine Beweise, um Ihre Behauptung zu stützen.
1252748
Die Funktion ist in einem Szenario sinnvoll, in dem der Benutzer viele Formularfelder im Modal ausfüllen muss. Wenn der Benutzer versehentlich außerhalb des Modals klickt, gehen alle eingegebenen Details verloren. dann müssten sie das Modal reaktivieren und die Felder wieder füllen. Diese Funktion würde eine solche Irritation vermeiden.
Mickmackusa

Antworten:

692

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
});
Nobita
quelle
7
@ user1296175 Was war Ihr endgültiger Code, um dies zu erreichen? Ich möchte das Gleiche tun.
AlphaMale
4
Danke @nobita, add data-backdrop = "static" macht den Trick! Twitter Bootstrap Dokument ist schlecht :(
Blue Smith
2
Überprüfen Sie die Antwort von @@ Varun Chatterji und fügen Sie diese in Ihre Modaldefinition ein
Leandro
1
Deaktivieren Sie den externen Klick für alle Modalitäten mit einer einzelnen Zeile von js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'static';
Lukas Liesis
1
Für Angular-Benutzer: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', Controller: 'modalController', Hintergrund: 'static',});
Alexandr
310

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.

Nirmal
quelle
6
Ja, dies ist die sauberste und einfachste Antwort (da das Hinzufügen von Datenattributen vermieden wird). Als Referenz backdropund keyboardwerden hier in ihrer Dokumentation im Abschnitt Optionen erwähnt .
Jesse Dupuy
Sind Datenattribute zu vermeiden? Bitte führen Sie dazu.
@GopalAggarwal: Hängt davon ab, wie Sie das Modal einrichten. Wenn Sie mehreren Ankertags ein Modal zuordnen, ist die Verwendung von Datenattributen möglicherweise sinnvoll. Aber wenn es nur ein Modal pro Tag gibt, würde ich mit den Skriptparametern gehen, bei denen jedes Verhalten an einer Stelle sichtbar ist.
Nirmal
7
Auch um zu vermeiden, dass die modale Anzeige sofort
angezeigt wird
214

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

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
Varun Chatterji
quelle
4
Ja, dies ist die sauberste und einfachste Antwort (da sie durch Hinzufügen von Datenattributen funktioniert). Als Referenz werden Hintergrund und Tastatur hier in ihrer Dokumentation im Abschnitt Optionen erwähnt.
Floww
Wenn Sie modal beim Laden der Seite starten, ist dies der beste Weg, um andere Schließoptionen zu entfernen.
Santa
46

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.

AymKdn
quelle
1
Das hat mir geholfen. Nach dem Einstellen des "Hintergrunds: 'statisch'" kann der Benutzer das Modal immer noch mit einem Klick schließen. schien ein Fehler zu sein, aber das hat es geschafft!
Omar
7
Im Moment: $ ('# modal'). RemoveData ('bs.modal'). Modal ({Hintergrund: 'statisch', Tastatur: falsch});
D3VELOPER
34

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

Sam Jha
quelle
2
Wie kann man es dann zurücksetzen?
Sertaconay
3
Einfach elegant. thx :) Und @sertaconay erstellt einfach eine boolesche Variable (zum Beispiel), die überprüft wird, um zu entscheiden, ob Sie die Standardeinstellung verhindern möchten
Nimrod Yonatan Ben-Nes
1
einzige Option hier, die nach einem Modal funktionierte, war opend
ask_io
2
Dies ist eine perfekte Lösung, wenn Sie eine genauere Kontrolle darüber haben möchten, wann Modals geschlossen werden können und wann nicht.
Curos
33

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">
Satish Singh
quelle
Dies ist perfekt für den Fall, dass das Modal im HTML deklariert und nur über Javascript geöffnet wird - dh es gibt keinen Link dazu. Vielen Dank!
Hgolov
22

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 .

CBarr
quelle
stackoverflow.com/questions/16030448/… Aber ich mag diese Lösung nicht
Victor
14

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.

Vivek
quelle
Dieser Rat wurde Jahre zuvor gegeben.
Mickmackusa
11

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';
});
Eric B.
quelle
6

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.

Morgan RotaStabelli
quelle
4

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>
user3634719
quelle
2

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.

Drew
quelle
Kannst du nicht auch einfach die Schaltfläche aus dem Modal-Header entfernen?
Foop
Manchmal ist es vorteilhaft, CSS zu verwenden, anstatt den HTML-Code zu ändern.
Drew
2

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.

Mohd Abdul Mujib
quelle
2

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

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
Haresh Hanat
quelle
Wie +1 dieser Methode möchte ich diese Option nicht für alle Modalitäten.
tsohr
2

Das ist heutzutage sehr einfach. Einfach hinzufügen:

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

In Ihrem Modalteiler.

jfindley
quelle
Dieser Rat wurde Jahre zuvor auf derselben Seite gegeben.
Mickmackusa
1

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.

miguelmpn
quelle
1
<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>
Shiva Krishna
quelle
0

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");
mohamed sulibi
quelle