it-swarm.com.de

Wie kann ich Bootstrap modal mit Javascript verstecken?

Ich habe die Beiträge hier gelesen, die Seite Bootstrap und habe wie verrückt gegoogelt - aber ich kann nicht finden, was sicher eine einfache Antwort ist ...

Ich habe ein Bootstrap -Modal, das ich von einem link_to-Helfer wie folgt öffne:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

In meiner Aktion ContactsController.create habe ich Code, der Contact erstellt und dann an create.js.erb weitergibt. In create.js.erb habe ich einen Fehlerbehandlungscode (eine Mischung aus Ruby und Javascript). Wenn alles gut geht, möchte ich den Modal schließen.

Hier habe ich Probleme. Ich kann den Modal nicht abweisen, wenn alles gut geht.

Ich habe $('#myModal').modal('hide'); ausprobiert und dies hat keine Auswirkung. Ich habe auch $('#myModal').hide(); ausprobiert, wodurch das Modal verworfen wird, aber der Hintergrund verlassen wird.

Gibt es eine Anleitung zum Schließen des Modals und/oder Entfernen des Hintergrunds aus create.js.erb?

Bearbeiten

Hier ist das Markup für myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>
263
jvillian

Versuchen Sie es mit der Konsole des Browsers, während das Modal im Browserfenster geöffnet ist

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

Wenn es funktioniert (und das Modal geschlossen wird), dann wissen Sie, dass Ihr geschlossenes Javascript nicht korrekt vom Server an den Browser gesendet wird.

Wenn es nicht funktioniert, müssen Sie auf dem Client genauer untersuchen, was gerade passiert. Stellen Sie beispielsweise sicher, dass es nicht zwei Elemente mit derselben ID gibt. Funktioniert es beispielsweise das erste Mal nach dem Laden der Seite, aber nicht das zweite Mal?

Browserkonsole: Firebug für Firefox, Debug-Konsole für Chrome oder Safari usw.

466
Larry K

zum Schließen von bootstrap modal können Sie 'hide' übergeben. als Option zur modalen Methode wie folgt

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

Bitte werfen Sie einen Blick auf die Arbeit Geige hier

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 sichtbar ist, können Sie hidden verwenden .bs.modal Ereignis Mehr über modale Methoden und Ereignisse erfahren Sie hier in Dokumentation

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

72
Subodh Ghulaxe

Ich benutze Bootstrap 3.4 Bei mir funktioniert das nicht

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

In meiner Verzweiflung tat ich Folgendes:

$('#myModal').hide();
$('.modal-backdrop').hide();

Vielleicht ist es nicht elegant, aber es funktioniert

46
gaza

Ich hatte den gleichen Fehler und diese Codezeile hilft mir wirklich.

$("[data-dismiss=modal]").trigger({ type: "click" });
36
Manuel Fernando

Die beste Form zum Ausblenden und Anzeigen eines Modals mit bootstrap it's

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
27
Royer Vazquez
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class
19
Shivam

Ich habe die richtige Lösung gefunden, Sie können diesen Code verwenden

$('.close').click(); 
18
Osama khodrog

(Bezogen auf Bootstrap 3), Um die Modalverwendung auszublenden: $('#modal').modal('hide'). Aber der Grund, warum die Kulisse (für mich) herumhing, war, dass ich das DOM für das Modal zerstörte, bevor 'hide' fertig war.

Um dies zu beheben, habe ich das ausgeblendete Ereignis mit dem Entfernen von DOM verkettet. In meinem Fall: this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding
10
Nathan

Ich bin auf ein ähnliches Problem gestoßen. Die $('#myModal').modal('hide'); läuft wahrscheinlich durch diese Funktion und trifft die Zeile

if (!this.isShown || e.isDefaultPrevented()) return

Das Problem ist, dass der Wert isShown möglicherweise nicht definiert ist, auch wenn das Modal angezeigt wird und der Wert true sein sollte. Ich habe den bootstrap Code geringfügig wie folgt geändert

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Dies schien das Problem zum größten Teil zu lösen. Wenn der Hintergrund weiterhin angezeigt wird, können Sie jederzeit einen Anruf hinzufügen, um ihn nach dem Ausblenden des Aufrufs $('.modal-backdrop').remove(); manuell zu entfernen. Überhaupt nicht ideal, funktioniert aber.

9
Richard Handley

Ich hatte besseres Glück, den Anruf zu tätigen, nachdem der "angezeigte" Rückruf aufgetreten ist:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Dadurch wurde sichergestellt, dass das Laden des Modals abgeschlossen war, bevor der Aufruf von hide () erfolgte.

8
schoonie23

Was wir fanden, war, dass es nur eine geringfügige Verzögerung zwischen dem Aufruf unseres Servercodes und der Rückkehr zum erfolgreichen Rückruf gab. Wenn wir den Aufruf an den Server in den Handler $("#myModal").on('hidden.bs.modal', function (e) einbinden und dann die Methode $("#myModal").modal("hide"); aufrufen, blendet der Browser das Modal aus und ruft dann den serverseitigen Code auf.

Auch hier nicht elegant, aber funktional.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Wie Sie sehen, wird beim Aufrufen von myFunc das Modal ausgeblendet und anschließend der serverseitige Code aufgerufen.

7
markdotnet
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 
5
Limitless isa

Ich hatte das gleiche Problem und fand nach einigem Experimentieren eine Lösung. In meinem Click-Handler musste ich verhindern, dass das Ereignis in die Luft sprudelt.

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
5
brentmc79

Hier ist das Dokument: http://getbootstrap.com/javascript/#modals-methods

Hier ist die Methode: $ ('# myModal'). Modal ('hide')

Wenn Sie das Modal mehrmals mit unterschiedlichen Inhalten öffnen müssen, schlage ich vor, Folgendes hinzuzufügen (in Ihrem Haupt-Js):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

So bereinigen Sie den Inhalt für die nächste Öffnung und vermeiden eine Art Zwischenspeicherung

Sogar ich habe die gleichen Probleme. Das hat mir sehr geholfen

$("[data-dismiss=modal]").trigger({ type: "click" });
4
Jaggi

$('#modal').modal('hide'); und seine Varianten funktionierten für mich nur, wenn ich data-dismiss="modal" als Attribut auf der Schaltfläche Abbrechen hatte. Wie Sie mussten ich möglicherweise schließen/möglicherweise nicht schließen, basierend auf einer zusätzlichen Logik, so dass ein direktes Klicken auf einen Link mit data-dismiss="modal" nicht ausreichen würde. Am Ende hatte ich eine versteckte Schaltfläche mit data-dismiss="modal", über die ich den Click-Handler programmgesteuert aufrufen konnte

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

und dann in den Click-Handlern zum Abbrechen, wenn Sie das Modal schließen müssen, das Sie haben können

$('#hidden-cancel').click();
3
Tyler

Wir müssen uns um das Sprudeln von Ereignissen kümmern. Müssen Sie eine Codezeile hinzufügen

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
3
Prathap Kudupu

Mir ist klar, dass dies eine alte Frage ist, aber ich habe festgestellt, dass keine dieser Fragen genau das war, wonach ich gesucht habe. Dies scheint darauf zurückzuführen zu sein, dass versucht wird, das Modal zu schließen, bevor es nicht mehr angezeigt wird.

Meine Lösung basierte auf der Antwort von @ schoonie23, aber ich musste ein paar Dinge ändern.

Zuerst habe ich oben in meinem Skript eine globale Variable deklariert:

<script>
    var closeModal = false;
    ...Other Code...

Dann in meinem Modalcode:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Dies ist dann: (Beachten Sie den Namen 'shown.bs.modal', der angibt, dass das Modal vollständig angezeigt wurde, im Gegensatz zu 'show', das beim Aufrufen des show-Ereignisses ausgelöst wird. (Ich habe ursprünglich nur 'shown' versucht, aber es hat nicht funktioniert. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Hoffe, dies erspart jemandem die zusätzliche Recherche eines Tages. Ich habe ein bisschen nach einer Lösung gesucht, bevor ich darauf gekommen bin.

3
Jason Godson

Ich habe diesen Code benutzt -

Modal mit weichem Effekt über Ausblenden ausblenden.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});
0
Sanjay Singhal

Wenn Sie die enge Klasse in Ihren Modalen verwenden, funktioniert Folgendes. Abhängig von Ihrem Anwendungsfall empfehle ich im Allgemeinen, nur nach dem sichtbaren Modal zu filtern, wenn es mehr als ein Modal mit der nahen Klasse gibt.

$('.close:visible').click();
0
Dave

Dies ist die schlechte Praxis, aber Sie können diese Technik verwenden, um modal zu schließen, indem Sie die Schaltfläche "Schließen" in JavaScript aufrufen. Dies wird nach 3 Sekunden modal geschlossen.

<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</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" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>
0
user5093161

Ich habe diesen einfachen Code benutzt:

$("#MyModal .close").click();
0
Viktor Kisil'ov