Schließen Sie Bootstrap Modal

432

Ich habe ein modales Bootstrap-Dialogfeld, das ich zunächst anzeigen möchte. Wenn der Benutzer dann auf die Seite klickt, wird es ausgeblendet. Ich habe folgendes:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

Das Modal wird anfangs angezeigt, schließt jedoch nicht, wenn Sie außerhalb des Modals klicken. Außerdem ist der Inhaltsbereich nicht ausgegraut. Wie kann ich das Modal zunächst anzeigen lassen und dann schließen, nachdem der Benutzer außerhalb des Bereichs geklickt hat? Und wie kann ich den Hintergrund wie in der Demo abblenden lassen?

Nick B.
quelle
Initialisieren Sie Ihr Modal mit $("#yourModal").modal()oder $('.modal').modal()?
Merv
Mehr Kontext oben hinzugefügt. Vielen Dank für alle Ideen @merv!
Nick B
Ja ... das hat das Problem gezeigt. @Tamil hat Ihre Lösung.
Merv

Antworten:

706

Setzen modal('toggle')stattmodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
Tamil Selvan C.
quelle
5
Das Einfügen des "Umschalters" ist überhaupt überflüssig. Stellen Sie nur sicher, dass auf dem Modal Div keine 'hide'-Klasse vorhanden ist. Aber ja, der Tippfehler hat das Problem verursacht. so +1
merv
22
Nein, es funktioniert nicht wie beabsichtigt. Es verbirgt das modale Element, aber das Hintergrund-Overlay-Element ist noch vorhanden. Sie sollten die @ Subodth-Lösung verwenden.
Parik Tiwari
1
@Pierre - Entfernen Sie Ihren Kommentar. .Modal (). Hide () ist nicht dasselbe wie .modal ('hide'). Sie werden die Leute verwirren.
Michael Peterson
2
Wie Parik sagte, ist die richtige Antwort Modal ('verstecken')
MidouCloud
Dies ist NICHT die richtige Antwort, überprüfen Sie die Antwort unten!
user1467439
412

Um das Bootstrap- Modal zu schließen , können Sie 'hide' als Option an die Modal-Methode wie folgt übergeben

$('#modal').modal('hide');

Bitte werfen Sie hier einen Blick auf die funktionierende Geige

Bootstrap bietet auch Ereignisse, die Sie in die modale Funktionalität einbinden können. Wenn Sie beispielsweise ein Ereignis auslösen möchten, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist , können Sie das Ereignis hidden.bs.modal verwenden. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in Dokumentation

Wenn keine der oben genannten Methoden funktioniert, geben Sie Ihrer Schaltfläche zum Schließen eine ID und lösen Sie einen Klick auf die Schaltfläche zum Schließen aus.

Subodh Ghulaxe
quelle
4
$ ('# modal'). modal ('umschalten'); besser modalen Schatten zu verstecken
hamzeh.hanandeh
5
@ hamzeh.hanandeh, togglebehält die Überlagerung und ist keine Lösung. Sie sollten immer entweder showoder verwenden hide.
Ryanpcmcquen
81
$('#modal').modal('toggle'); 

oder

$('#modal').modal().hide();

sollte arbeiten.

Wenn nichts anderes funktioniert, können Sie die Schaltfläche zum Schließen des Modals direkt aufrufen:

$("#modal .close").click()
Robert Benyi
quelle
10
Der mit hide () schließt das Modal, lässt aber den Hintergrund unscharf. $ ("# modal .close"). click () macht es perfekt. Vielen Dank!
Shilpa
4
Dies ist bereits klar dokumentiert, hier besteht keine Notwendigkeit, einen Klick vorzutäuschen, das scheint ziemlich ruckelig. Die richtige Antwort lautet: $ ('# modal'). Modal ('hide');
Michael Peterson
this -> $ ('# modal'). modal (). hide ();
Tara
Ich habe ein Modell, das nicht mit schließt, $('#modal').modal('hide')aber ich kann es mit schließen, $('#modal').modal('toggle')aber das zeigt eine vertikale Bildlaufleiste nach dem Schließen. Also für mich $('#modal').hide()hat es perfekt funktioniert, aber ich möchte wissen, ob das irgendwelche Probleme verursachen würde? Und ich codiere innen, $('#modal .close').click()also glaube ich nicht, dass ich es verwenden könnte, um Modal zu schließen.
Ahtisham
34

das hat bei mir funktioniert:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

Verwenden Sie diesen Link modal schließen

Santhosh
quelle
20
$("#your-modal-id").modal('hide');

Das Ausführen dieses Aufrufs über die Klasse ($(".my-modal"))funktioniert nicht.

Yishai Landau
quelle
18

Versuche dies

$('#modal_id').modal('hide');
Liebe Kumar
quelle
3
Ich denke, dies gibt eine Antwort auf die Frage.
JKDEV
1
Genau. Diese Antwort ist genauer auf die Frage.
Mikeyq6
1
Dies ist eine bessere Antwort als die am besten bewerteten.
Marcelo Agimóvel
@ MarceloAgimóvel :-)
Liebe Kumar
10

Dieser ist ziemlich gut und funktioniert auch in Winkel 2

$("#modal .close").click()
user3869304
quelle
Funktioniert bei mir stattdessen $('#modal').modal('toggle');hat das keine Wirkung.
Todor Todorov
8

Meine fünf Cent in diesem Fall sind, dass ich nicht auf das Bootstrap-Modal mit einer ID abzielen möchte und da es jeweils nur ein Modal geben sollte, sollte das Folgende völlig ausreichen, um das Modal zu entfernen, da das Umschalten gefährlich sein könnte ::

$('.modal').removeClass('show');
Andre Van Zuydam
quelle
2
Die Absichten sind gut, aber dieser Ansatz wird nicht immer funktionieren. Anderen Seitenelementen, einschließlich <body>Klassen, wurden Klassen hinzugefügt, die ebenfalls zurückgesetzt werden müssten. Die beste Antwort ist die Verwendung der 'hide'Methode.
JustinStolle
7

Unter bestimmten Umständen kann ein Tippfehler der Schuldige sein. Stellen Sie zum Beispiel sicher, dass Sie:

data-dismiss="modal"

und nicht

data-dissmiss="modal"

Beachten Sie das doppelte "ss" im zweiten Beispiel, das dazu führt, dass die Schaltfläche "Schließen" fehlschlägt.

Zinkzink
quelle
6

Wir können das modale Popup auf folgende Arten schließen:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.
Sheo Dayal Singh
quelle
6

$('.modal.in').modal('hide');

Verwenden Sie den obigen Code, um den Hintergrund von Modal auszublenden, wenn Sie mehrere Modal-Pops auf einer Seite verwenden.

Sher Bahadur
quelle
Oder reicht nur $('.modal').modal('hide');.
Matt Roy
6

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Ganesh Putta
quelle
Fehler: "Nachricht": "Nicht gefangener Typ Fehler: $ (...). Modal ist keine Funktion"
Ivan Burlutskiy
Ja. Ich habe den Fehler, wenn "Code-Snippet ausführen" in Chrome (Linux Mint). Aber es funktioniert in Firefox.
Ivan Burlutskiy
1
@ Ivan Burlutskiy, danke, dass du mich informiert hast. Dies ist ein Problem mit jquery include, also habe ich es behoben. Jetzt funktioniert es gut in allen Browsern.
Ganesh Putta
5
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };
Sheladiya Ajay
quelle
Hallo - danke für deine Antwort. Ich habe dies als Code formatiert (was ziemlich einfach war - nur die erste Zeile etwas mehr einrücken). Allerdings würde ich vermuten, dass hier nur das $('#DeleteModal').modal('hide');relevant ist?
Rup
4

Sie können verwenden;

$('#' + $('.modal.show').attr('id')).modal('hide');
Fatih Turan
quelle
3

Die Verwendung von modal.hide würde nur das Modal ausblenden. Wenn Sie Overlay unter dem Modal verwenden, ist es immer noch vorhanden. Verwenden Sie Click Call, um das Modal tatsächlich zu schließen und das Overlay zu entfernen.

$("#modalID .close").click()
Vikalp Veer
quelle
3

Eine andere Möglichkeit besteht darin, zuerst die Klasse modal-open zu entfernen, wodurch das Modal geschlossen wird. Dann entfernen Sie den Klassen-Modal-Hintergrund, der die graue Abdeckung des Modals entfernt.

Der folgende Code kann verwendet werden:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  
Orozcorp
quelle
Bitte versuchen Sie zu vermeiden, nur Code als Antwort auszugeben, und versuchen Sie zu erklären, was er tut und warum. Ihr Code ist möglicherweise nicht offensichtlich für Personen, die nicht über die entsprechende Codierungserfahrung verfügen. Bitte bearbeiten Sie Ihre Antwort, um Klarstellung und Kontext aufzunehmen, und versuchen Sie, Einschränkungen, Annahmen oder Vereinfachungen in Ihrer Antwort zu erwähnen.
Frits
OK, im Grunde genommen wird dadurch die Klasse modal-open entfernt, wodurch das Modal geschlossen wird. entfernt dann die Klasse Modal-Hintergrund, die die graue Abdeckung des
Modals
3

Ich habe Modal Programmatisch mit diesem Trick geschlossen

Fügen Sie eine Schaltfläche in modal mit hinzu data-dismiss="modal"und verbergen Sie die Schaltfläche mit display: none. So wird es aussehen

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Wenn Sie nun Modal Programmatisch schließen möchten, lösen Sie einfach ein Klickereignis auf dieser Schaltfläche aus, das für den Benutzer nicht sichtbar ist

In Javascript können Sie einen Klick auf diese Schaltfläche wie folgt auslösen:

document.getElementById('close-modal').click();
Zohab Ali
quelle
2

Dieser Code hat perfekt funktioniert, um ein Modal zu schließen (ich verwende Bootstrap 3.3).

$('#myModal').removeClass('in')
user3870075
quelle
2

In meinem Fall reagierte die Hauptseite, von der aus das Bootstrap-Modal ausgelöst wurde, nach der Verwendung von $("#modal").modal('toggle');way nicht mehr, sondern auf folgende Weise:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
Awais Nasir
quelle
2

Das funktioniert gut

$(function () {
   $('#modal').modal('toggle');
});

Wenn jedoch mehrere Modale übereinander gestapelt sind, ist dies nicht effektiv. Stattdessen funktioniert dies

data-dismiss="modal"
Edgar256
quelle
2

Nach einigen Tests stellte ich fest, dass für das Bootstrap-Modal einige Zeit gewartet werden muss, bevor das $(.modal).modal('hide')nach dem Ausführen ausgeführt wird $(.modal).modal('show'). Und ich fand in meinem Fall, dass ich mindestens 500 Millisekunden Intervall zwischen den beiden brauche.
Das ist also mein Testfall und meine Lösung:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);
Ibrahim Saputra
quelle
Dies löst die Probleme, die ich hatte, als das Modal nicht geschlossen wurde, als ich ein anderes
öffnete
2

Sie können diese Referenz sehen, aber wenn dieser Link entfernt wurde, lesen Sie diese Beschreibung:

Rufen Sie ein Modal mit der ID myModal mit einer einzelnen Zeile JavaScript auf:

$('#myModal').modal(options)

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data- an , wie in data-background = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang. Sie kehren zum Anrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet. Außerdem wird ein Methodenaufruf für eine Übergangskomponente ignoriert.

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation.

.modal (Optionen)

Aktiviert Ihren Inhalt als Modal. Akzeptiert ein optionales Optionsobjekt.

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

.modal ('umschalten')

Schaltet ein Modal manuell um. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das Ereignis "used.bs.modal" oder "hidden.bs.modal" auftritt).

$('#myModal').modal('toggle')

.modal ('show')

Öffnet manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich angezeigt wurde (dh bevor das Ereignis "used.bs.modal" auftritt).

$('#myModal').modal('show')

.modal ('verstecken')

Versteckt manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das Ereignis hidden.bs.modal auftritt).

$('#myModal').modal('hide')

.modal ('handleUpdate')

Passen Sie die Position des Modals manuell neu an, wenn sich die Höhe eines Modals ändert, während es geöffnet ist (dh falls eine Bildlaufleiste angezeigt wird).

$('#myModal').modal('handleUpdate')

.modal ('entsorgen')

Zerstört das Modal eines Elements.

Veranstaltungen

Die modale Klasse von Bootstrap macht einige Ereignisse sichtbar, um sich in die modale Funktionalität einzubinden. Alle Modalereignisse werden auf das Modal selbst (dh auf das **) ausgelöst. Typ Beschreibung

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})
mirzaei.sajad
quelle
0

Außerdem können Sie auf ein 'x' "klicken", wodurch der Dialog geschlossen wird. Z.B:

$(".ui-dialog-titlebar-close").click();

Slashka
quelle
0

In meinem Fall habe ich eine Schaltfläche verwendet, um das Modal anzuzeigen

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Um das Modal (das die ID = 'my-modal-to-show' hat) in meinem Code zu schließen, rufe ich diese Funktion auf (in Angular Typoskript):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Wenn ich $ (modalId) .modal ('hide') aufrufe, funktioniert es nicht und ich weiß nicht warum

PS.: In meinem Modal habe ich dieses Button-Element auch mit der .close-Klasse codiert

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>
Anderson Dourado Cunha
quelle
0

Manchmal funktioniert die Lösung nicht, so dass Sie die In-Klasse ordnungsgemäß entfernen und die CSS-Anzeige hinzufügen müssen: keine manuell.

$("#modal").removeClass("in");
$("#modal").css("display","none");
عبد الرحمان بويشو
quelle