So blenden Sie Bootstrap modal mit javascript?

Habe ich die Beiträge gelesen hier, der Bootstrap-Website, und Gegoogelt wie verrückt, aber kann Sie nicht finden, was ich bin sicher, dass wird eine einfach Antwort...

Ich habe eine Bootstrap-modal, die ich offen aus einem link_to-helper wie diese:

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

In meinem ContactsController.create Aktion, ich habe code, der erstellt Contact geht dann aus, um create.js.erb. In create.js.erb habe ich einige Fehler-handling-code (eine Mischung aus ruby und javascript). Wenn alles gut geht, möchte ich schließen Sie den modal.

Dies ist, wo ich Probleme habe. Ich kann nicht scheinen, zu entlassen, der modal-wenn alles gut geht.

Ich habe versucht $('#myModal').modal('hide'); und hat dies keine Auswirkung. Ich habe auch versucht $('#myModal').hide(); die Ursachen der modal zu entlassen, lässt aber die Kulisse.

Jede Orientierung, wie Sie zum schließen des modalen und/oder zu entlassen, die Kulisse von innerhalb create.js.erb?

Bearbeiten

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

$('#myModal').modal('hide'); ist die korrekte syntax zu schließen/verbergen des modal mit id myModal (Sie können dies testen, auf der Bootstrap-Dokumentation Seite). Sind Sie sicher, Sie haben ein element mit dieser id auf Ihrer Seite? Auch was du versucht zu erreichen, mit diesem Aufruf? Ihre aktuelle Implementierung führt einen Ajax-request new_contact_path und gleichzeitig öffnet sich die modal mit dem Inhalt #myModal – ist es das, was Sie wollen?
Hallo, Julian. Ich geschrieben myModal markup oben und es ist in der Tat ein div mit der id myModal. Ich wieder versucht $('myModal').modal('hide') und immer noch nicht gut. HM. In Bezug auf was ich ' m versuchen zu erreichen, ich denke, es war vielleicht falsch zu verwenden, die link_to-helper. Ich habe ersetzt diese mit: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a> da ich nicht wirklich brauchen, ein Anruf new_contact_path. Ich will nur die modal zu öffnen, und dann deal mit user-input. Vielen Dank für die Zeit nehmen, zu reagieren. Ich werde sehen, ob kann ich nicht lösen.
Ich denke, es ist nur ein Tippfehler, aber der call sollte $('#myModal').modal('hide');(es ist ein # fehlt in Ihrem Kommentar).
Meine schlecht für die Typisierung nicht kopiert, sondern aus dem tatsächlichen code. Der aktuelle code lautet: $('#myModal').modal('hide'). J
Können Sie versuchen, mit bootboxjs

InformationsquelleAutor jvillian | 2012-05-05

465

Mit dem modal öffnen im browser-Fenster, benutzen Sie die browser-Konsole, um zu versuchen
```
$('#myModal').modal('hide');
```
Wenn es funktioniert (und das modal schließt), dann wissen Sie, dass Ihre enge Javascript ist nicht gesendet werden, vom server an den browser richtig.

Wenn es nicht funktioniert, dann brauchen Sie, um weiter zu untersuchen, auf dem client, was passiert ist. ZB stellen Sie sicher, dass es nicht zwei Elemente mit der gleichen id. ZB funktioniert es das erste mal nach der Seite geladen, aber nicht das zweite mal?

Browser-Konsole: firebug für firefox, die debugging-Konsole für Chrome oder Safari, etc.
- Der zweite Absatz war das, was ich suchte. Doppelte ID ' s wurden meine modals nicht zu zeigen, richtig das zweite mal.
InformationsquelleAutor Larry K
72

schließen bootstrap modal, die Sie übergeben können "verstecken" als option modal-Methode wie folgt
```
$('#modal').modal('hide');
```
Bitte werfen Sie einen Blick auf die Arbeit Fiedel hier

bootstrap bieten auch Veranstaltungen, können Sie Haken in modal Funktionalität, wie wenn Sie wollen das Feuer ein Ereignis, wenn der modal beendet hat, wird dem Benutzer verborgen bleibt, die Sie verwenden können versteckt.bs.modal Fall, Sie können mehr über die modalen Methoden und Ereignisse hier in Dokumentation

Wenn nicht von der oben beschriebenen Methode arbeiten, geben Sie eine id für Ihre close-button und trigger klicken Sie auf die Schaltfläche "schließen".
- Dies ist besonders nützlich, wenn Sie genau wissen, an welchem Punkt der modale dialog soll zu schließen. Zum Beispiel am Ende von einem Erfolg der Funktion. So, wenn es zu einem Fehler, kann der dialog anzuzeigen.
InformationsquelleAutor Subodh Ghulaxe
46

Ich benutze Bootstrap-3.4
Bei mir funktioniert das nicht

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

In meiner Verzweiflung,habe ich dies getan:
```
$('#myModal').hide();
$('.modal-backdrop').hide();
```
Ist es vielleicht nicht elegant, aber es funktioniert
- Es wäre besser, wenn Sie mit $(".modal-backdrop").entfernen();
- dadurch werden neue Fehler mit sich. bitte verwenden Sie Methoden empfehlen,
- jQuery('.modal-hintergrund').klicken Sie();
- etwas buggy, aber sicher funktioniert. Manuel Fernando's Lösung unten funktioniert perfekt für mich.
- bitte empfehlen eine Methode, wenn diejenigen, die hier erwähnt sind, sind nicht gut und Sie wissen von einem.
- Danke @Gaza, in Zeiten der Verzweiflung, wir brauchen Helden wie dich.
InformationsquelleAutor gaza
35

Ich erlebte mit, dass die gleichen Fehler und diese Zeile code hilft mir wirklich.
```
$("[data-dismiss=modal]").trigger({ type: "click" });
```
- Ich habe gelesen, ein Thema vorgeschlagen, das problem könnte sein, dass die Daten-entlassen-Attribut auf das element, dann auf der Oberseite von diesem Versuch zum auslösen von javascript
InformationsquelleAutor Manuel Fernando
27

Die Beste form, sich zu verstecken und zeigen ein modales mit bootstrap, es ist
```
//SHOW
$('#ModalForm').modal('show');
//HIDE
$('#ModalForm').modal('hide');
```
InformationsquelleAutor 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

Es für mich funktioniert wie ein Charme..danke @shivam
es hat funktioniert, aber brach modal, wenn ich öffnen Sie es erneut, modal nicht mehr scrollen

InformationsquelleAutor Shivam

18

Fand ich die richtige Lösung können Sie diesen code verwenden
```
$('.close').click(); 
```
- beste Lösung bisher
InformationsquelleAutor Osama khodrog
10

(Bezogen auf Bootstrap 3) Zum ausblenden des modalen Nutzung: $('#modal').modal('hide'). Aber der Grund, die Kulisse gehängt um (für mich) war, weil ich die Zerstörung der DOM für den modalen vor 'hide' fertig.

Diese zu lösen, ich kettete das versteckte Ereignis, mit dem DOM entfernen. 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
```
- aber können Sie mir bitte sagen, über this.render() zeigt seine undefined is not a function in meinem chrome-Konsole.
InformationsquelleAutor Nathan
9

Lief ich in das, was ich glaube, war ein ähnliches Problem. Die $('#myModal').modal('hide'); ist wahrscheinlich durch die Funktion und trifft die Linie
```
if (!this.isShown || e.isDefaultPrevented()) return
```
Das Problem ist, dass der Wert isShown undefiniert sein kann, auch wenn der modal angezeigt wird und der Wert sollte true sein. Ich habe geändert, die bootstrap-code leicht auf folgende
```
if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return
```
Schien dies zu beheben das Problem für die meisten Teil. Wenn der hintergrund bleibt immer noch, Sie könnten immer einen Anruf hinzufügen, um manuell entfernen Sie es nach dem ausblenden call $('.modal-backdrop').remove();. Nicht ideal, aber funktioniert.

InformationsquelleAutor Richard Handley
8

Hatte ich mehr Glück, die den Aufruf nach den "gezeigten" callback aufgetreten:
```
$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})
```
Diese gewährleistet die modale war fertig geladen, bevor die hide () - Aufruf durchgeführt wurde.

InformationsquelleAutor schoonie23
7

Was wir fanden war, dass es nur zu einer leichten Verzögerung zwischen dem Aufruf unserer server-code und die Rückkehr zum Erfolg zurück. Wenn wir wickelte den Aufruf an den server in der $("#myModal").on('hidden.bs.modal', function (e) handler und rief dann die $("#myModal").modal("hide"); Methode, den browser ausblenden, die modal-und dann rufen Sie das server-side-code.

Wieder, nicht elegant, aber funktionell.
```
 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            //Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };
```
Wie Sie sehen können, wenn myFunc aufgerufen wird, wird es zu verbergen die modal-und dann rufen Sie das server-side-code.

InformationsquelleAutor markdotnet
5

War ich mit dem gleichen problem, und nach ein wenig Experimentieren fand ich die Lösung. In meiner click-handler, ich brauchte halt die Veranstaltung vom sprudeln, etwa so:
```
$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
```
InformationsquelleAutor brentmc79
5

Hier ist die Dokumentation:
http://getbootstrap.com/javascript/#modals-methods

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

Wenn Sie brauchen, um öffnen Sie mehrmals am modal mit unterschiedlichen Inhalten, schlage ich vor, auf "hinzufügen" (in der Sie Haupt-js):
```
$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });
```
So dass Sie reinigen Sie die Inhalte für die nächste öffnung und vermeiden eine Art von caching

InformationsquelleAutor Christophe Meheut Forik 21

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

InformationsquelleAutor Limitless isa

Müssen wir aufpassen, Ereignis-bubbling. Hinzufügen einer Zeile code

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

InformationsquelleAutor Prathap Kudupu

3

Ich weiß, das ist eine alte Frage, aber ich fand, dass keines von diesen waren wirklich das, was ich suchte genau. Es scheint verursacht zu werden, indem Sie versuchen, schließen Sie die modale, bevor es fertig ist zeigen.

Meine Lösung basiert auf einer @schoonie23 Antwort, aber ich musste ein paar Dinge ändern.

Erste, als ich erklärte, dass eine Globale variable oben in mein Skript:
```
<script>
    var closeModal = false;
    ...Other Code...
```
Dann in meinem modal-code:
```
$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...
```
Dann so aus: (Hinweis: der name 'angezeigt.bs.modal', die angibt, dass das modal hat gezeigt, ganz im Gegensatz zu 'zeigen', die ausgelöst wird, wenn das show-Ereignis aufgerufen wird. (Ich habe ursprünglich versucht nur 'gezeigt' aber es hat nicht funktioniert.)
```
$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});
```
Hoffe, das spart jemand die extra Forschung einige Tag. Ich verbrachte ein bisschen auf der Suche nach einer Lösung, bevor ich kam mit dieser.

InformationsquelleAutor Jason Godson
3

Sogar ich habe die gleiche Art von Fragen. Das half mir sehr
```
$("[data-dismiss=modal]").trigger({ type: "click" });
```
InformationsquelleAutor Jaggi
3

$('#modal').modal('hide'); und seine Varianten haben bei mir nicht funktioniert, es sei denn, ich hatte data-dismiss="modal" als Attribut auf die Schaltfläche Abbrechen. Wie Sie, meine Bedürfnisse wurden, um möglicherweise in der Nähe /womöglich nicht in der Nähe, basierend auf einige zusätzliche Logik so auf einen link mit data-dismiss="modal" Siegwette würde das nicht tun. Ich landete mit einem versteckten button mit data-dismiss="modal" konnte, dass ich programmatisch aufrufen der click-handler aus, so
```
<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>
```
und dann im click-Handler für "Abbrechen", wenn Sie brauchen, um in der Nähe der modalen können Sie
```
$('#hidden-cancel').click();
```
- In meinem Fall (asp-net-razor-Seite) ich hatte es ähnlich wie der OP: ich hatte ein etwas leeres div mit der Klasse "modal" und dynamisch Hinzugefügt werden, eine cshtml-Datei, z.B. die modalen Körper und fügte hinzu, ein Klick auf einen button, dieser Körper, sobald die modal angezeigt werden würde. calling ".modal('hide)" allein nicht ausreichend war, wie Sie betonte: "data-dismiss="modal"" auf die aufrufen-Schaltfläche war der deal!!! ty
InformationsquelleAutor Tyler

Dies ist die schlechte Praxis, aber Sie können diese Technik verwenden, um in der Nähe modal durch Aufruf der Schaltfläche "schließen" in javascript.
Dies wird in der Nähe modal nach 3 Sekunden.

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

InformationsquelleAutor

Habe ich dieses code -

Verstecken modal mit glatten Effekt mit Fade-Out.

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

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

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

InformationsquelleAutor Sanjay Singhal

0

Wenn Sie die close-Klasse in Ihrem modals, die folgenden arbeiten. Die vom Anwendungsfall abhängig sind, empfehle ich grundsätzlich filtern, um nur die sichtbaren modal, wenn es mehr als ein modals mit der close-Klasse.
```
$('.close:visible').click();
```
InformationsquelleAutor Dave
0

Ich habe diesen einfachen code:
```
$("#MyModal .close").click();
```
InformationsquelleAutor Viktor Kisil'ov

-1

diese kann getan werden einfach nur HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

InformationsquelleAutor jarosik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.