it-swarm.com.de

Bootstrap Modal verschwindet sofort

Ich arbeite an einer Website mit Bootstrap.

Grundsätzlich wollte ich ein Modal auf der Homepage verwenden, das durch die Schaltfläche in der Heldeneinheit aufgerufen wird.

Tastencode:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Modalcode: 

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

Das Problem ist, dass, sobald ich auf die Schaltfläche klicke, der Modal eingeblendet wird und sofort verschwindet.

Ich würde mich über jede Hilfe freuen. 

Wie kann man außerdem die Farbe des Dropdown-Dreiecks ändern (nach oben zeigen, kein Schwebeflug)? Ich arbeite an einer Website, die auf Orange und Braun basiert, und das blaue Ding ist wirklich nervig.

184
Fonzusys

Eine wahrscheinliche Ursache

Dies ist ein typisches Verhalten, wenn das JavaScript für das Modal-Plugin zweimal geladen wird. Bitte vergewissern Sie sich, dass das Plugin nicht doppelt geladen wird. Je nach verwendeter Plattform kann der Modalcode aus einer Reihe von Quellen geladen werden. Einige der häufigsten sind:

  • bootstrap.js (die vollständige BootStrap JS-Suite)
  • bootstrap.min.js (wie oben, nur minimiert)
  • bootstrap-modal.js (das eigenständige Plugin)
  • ein Abhängigkeitslader, z. B. require('bootstrap')

Tipps zum Debuggen

Ein guter Anfang ist, die registrierten click Ereignis-Listener mit den Entwickler-Tools in Ihrem Browser zu überprüfen. Chrome listet beispielsweise die JS-Quelldatei auf, in der der Code zum Registrieren des Listeners gefunden werden kann. Eine andere Option besteht darin, zu versuchen, die Quellen auf der Seite nach einer im Modalcode gefundenen Phrase zu durchsuchen, z. B. var Modal.

Leider werden diese nicht immer in allen Fällen gefunden. Das Überprüfen der Netzwerkanforderungen kann etwas robuster sein, wenn Sie ein Bild von dem auf einer Seite geladenen Inhalt erhalten.

Eine (defekte) Demo

Hier ist eine Demo, was passiert, wenn Sie sowohl bootstrap.js als auch bootstrap-modal.js laden (nur um Ihre Erfahrung zu bestätigen):

Plunker

Wenn Sie auf dieser Seite bis zum Ende der Quelle scrollen, können Sie die <script>-Zeile für bootstrap-modal.js entfernen oder auskommentieren und dann überprüfen, ob das Modal jetzt wie erwartet funktioniert.

426
merv

Ich hatte das gleiche Problem, aber es hatte eine andere Ursache. Ich folgte der Dokumentation und erstellte einen Button wie folgt:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Als ich es anklickte, schien es, als würde nichts passieren. Die Schaltfläche befand sich jedoch in einem <form>, der vorübergehend nur die gleiche Seite abrief.

Dies wurde durch Hinzufügen von type="button" zum Schaltflächenelement behoben, sodass das Formular beim Klicken nicht gesendet wurde.

72
Rory Hunter

Für mich funktionierte das Entfernen 

data-toggle="modal"

von der Taste. Die Schaltfläche selbst kann ein beliebiges Element sein - ein Link, ein Div, eine Schaltfläche usw. 

17

Ich suchte eine Weile nach einer doppelten Bootstrap-Referenz in meiner mvc-App, nach den anderen hilfreichen Antworten auf diese Frage.

Endlich fand ich es - es war in einer anderen Bibliothek enthalten, die ich verwendete, war also überhaupt nicht offensichtlich! (datatables.net).

Wenn dieses Problem weiterhin auftritt, suchen Sie nach anderen Bibliotheken, die möglicherweise Bootstrap für Sie enthalten. (Mit datatables.net können Sie einen Download mit oder ohne Bootstrap angeben - andere machen dasselbe).

Also entfernte ich den bootstrap.min.js von meinem bundle.config und alles funktionierte gut.

14
John Lucas

Dasselbe Symptom im Zusammenhang mit einer Rails-Anwendung mit Bootstrap, die von bootstrap-sass gem bereitgestellt wird, und der Antwort von @ merv brachte mich auf den richtigen Weg.

Meine application.js-Datei hatte folgendes:

//= require bootstrap
//= require bootstrap-sprockets

Die Lösung bestand darin, eine der beiden Zeilen zu entfernen. Tatsächlich warnt Sie die Readme des Edelsteins vor diesem Fehler. Mein Fehler.

12
Giuseppe

Mein Code hatte irgendwie die bootstrap.min.js zweimal enthalten. Ich habe einen von ihnen entfernt und alles funktioniert jetzt gut.

8
Ricardo Pieper

e.preventDefault(); mit jquery ui

Für mich ist dieses Problem aufgetreten, als die Click-Methode auf einer Jquery-UI-Schaltfläche außer Kraft gesetzt wurde, was dazu führte, dass standardmäßig eine Seite beim Klicken neu geladen wurde.

8
LX-3

Das Problem kann auch auftreten, wenn Sie mit jquery einen Ereignis-Listener zweimal anhängen. Zum Beispiel würden Sie Folgendes festlegen:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

In diesem Fall wird das Ereignis zweimal hintereinander ausgelöst und der modale Modus verschwindet.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Siehe Beispiel: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

7
gpasse

Ich bin auf das gleiche Symptom gestoßen, das @gpasse in seinem Beispiel zeigte. Hier war mein Code ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

Wie @Bhargav vorschlug, lag mein Problem daran, dass der Button das Formular übermitteln und die Seite neu laden musste. Ich habe den Button wie folgt in einen <a>-Link geändert:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... und das Problem wurde behoben.

HINWEIS: Ich habe noch nicht genug Ansehen, um einfach einen Kommentar oder eine Verbesserung hinzuzufügen, und ich hatte das Gefühl, ich könnte ein wenig Klarheit hinzufügen.

5
JDev

Ich bin heute selbst auf dieses Problem gestoßen und es kam nur in Chrome vor. Mir wurde klar, dass es sich dabei um ein Rendering-Problem handeln konnte. Durch das Verschieben des spezifischen Modals auf die eigene Rendering-Ebene wurde das Problem gelöst.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}
3
gmaliar

Ich hatte auch das gleiche Problem, aber für mich geschah es, weil ich einen Button mit dem Typ "Submit" im modalen Formular hatte. ich habe mich verändert

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

zu

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

Und das Problem mit dem Verschwinden wurde behoben.

3
doug

In meinem Fall hatte ich nur eine einzige bootstrap.js, jquery.js-Datei, die jedoch immer noch einen solchen Fehler erhielt, und mein Code für die Schaltfläche war wie folgt:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Ich habe einfach e.preventDefault () hinzugefügt; dazu und es hat wie Charme funktioniert.

Mein neuer Code war also wie folgt:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>
3
Mekey Salaria

In meinem Fall bewirkt ein Klick auf eine Schaltfläche ein (nicht gewünschtes) Neuladen der Seite.

Hier ist mein Fix:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>
2
user6537157

In meinem Fall habe ich die actionlink-Schaltfläche in MVC verwendet, und ich bin mit diesem Problem konfrontiert. Ich habe schon viele andere Lösungen ausprobiert, aber immer noch mit diesem Problem konfrontiert.

Ich habe in JavaScript Modal mit aufgerufen 

 $('#ModalId').modal('show');

Vor dem Fehler verwende ich diesen Button

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

Ich habe keinen Wert für die Eigenschaft "href" in dieser Schaltfläche, daher stehe ich vor dem Problem.

Dann bearbeite ich diesen Button-Code so

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

dann Problem gelöst, nur ein Fehler wegen Nr. im ersten.

sehen Sie, ob dies für Sie hilfreich ist.

2
Saurabh Solanki

Ich hatte das gleiche Problem bei der Arbeit an einem Projekt mit asp.NET. Ich habe mit bootstrap 3.1.0 ein Downgrade auf Bootstrap 2.3.2 gelöst.

1
Ago

Ich hatte beim Testen auf mobilen Geräten das gleiche Problem und dieser Trick funktionierte für mich

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Ändern Sie die Schaltfläche, um das Tag zu verankern. Es sollte funktionieren. Das Problem tritt auf, weil der Typ-Button beim Senden versucht, das Modal sofort verschwindet. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Ich hoffe, das würde für Sie funktionieren. 

1
Bhargav

Noch eine andere Ursache/Lösung! Ich hatte in meinem JS-Code:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Aber mein HTML-Code wurde bereits geschrieben als:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Dies ist eine weitere Permutation, wie Duplikationen den Code eingegeben und das Modal geöffnet und dann geschlossen hatten. In meinem Fall lösen data-target und data-toggle in html gemäß Bootstrap-Dokumenten bereits den Modal aus. Der JS-Code ist daher redundant, und wenn er entfernt wird, funktioniert er.

0
james

In meinem Fall hatte ich die CDN in den Head von application.html.erb aufgenommen und auch das Juwel 'jquery-Rails' installiert, das ich dank der Dokumentation und der obigen Beiträge vermute, ist nicht erforderlich.

Ich habe einfach die CDN (unten) aus dem Kopf von application.html.erb auskommentiert und der Modal bleibt offen.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
0
brntsllvn

Hast du das Entfernen versucht?

data-dismiss="modal"
0
JeffNhan

falls jemand Codeigniter 3 Bootstrap mit datatable verwendet.

unten ist mein Fix in config/ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'
0
bravo net

Ich weiß, das ist alt, aber hier ist noch etwas zu prüfen - stellen Sie sicher, dass Sie nur ein data-target = -Attribut haben. Ich hatte es dupliziert und das Ergebnis war wie in diesem Thread.

0
Pete

bei der Arbeit mit Angular (5) stehe ich vor demselben Problem, aber in meinem Fall habe ich Folgendes gelöst:

komponente.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

komponente.ts

HINWEIS: Sie müssen Jquery in der TS-Datei als "var $ deklarieren: any;" importieren.

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Änderungen, die ich vorgenommen habe:

  • "data-toggle =" modal "vom Button-Tag entfernt (Dank an @miCRoSCoPiC_eaRthLinG, diese Antwort hilft mir hier) In meinem Fall ist es das Anzeigen von Modal, also habe ich (click) =" showresult () "

  • inside component.ts muss Jquery ($) und die Klickmethode innerhalb der Schaltfläche showresult () aufrufen, "$ ('# myModal'). modal ('show');"

0
Bhagvat Lande

Mußte sich dem gleichen Problem stellen. Der Grund ist derselbe wie der @merv. Das Problem wurde mit einer calendar-Komponente zur Seite hinzugefügt. Die Komponente selbst fügt die modale Funktion hinzu, die im Kalender-Popup verwendet werden soll.

Die Gründe für das Aufbrechen des Modell-Popups werden daher einer oder mehrere der folgenden sein

  • Laden von mehr als einer Bootstrap-Version/-Datei (minified ...)
  • Hinzufügen eines externen Kalenders zu der Seite, auf der Bootstrap verwendet wird
  • Hinzufügen einer benutzerdefinierten Alarm- oder Popup-Bibliothek zur Seite
  • Jede andere Bibliothek, die Popup-Verhalten hinzufügt 
0
Shantha Kumara

Ich hatte auch das gleiche Problem. Das Problem bei mir war, dass ich den Modal angezeigt habe, als ich einen Link drückte und zur Bestätigung mit Jquery aufforderte.

Der folgende Code zeigte die Modalität an und verschwand sofort:

<a href="" onclick="do_some_stuff()">Hey</a>

Am Ende habe ich '#' zu href hinzugefügt, so dass der Link nirgendwohin geht und mein Problem gelöst hat.

<a href="#" onclick="do_some_stuff()">Hey</a>
0
Eutychus

Ich hatte auch das Problem. Wenn sich der Button innerhalb eines- Tags befindet, erscheint der Modal einmal und verschwindet bald genug, wodurch der Button aus dem Formular entfernt wird. Danke, ich bin in diesem Thread gelandet! +1 an alle.

0
satheeshwaran

Ich hatte bootstrap über bower zu meinem Projekt hinzugefügt, dann importierte ich die bootstrap.min.js-Datei und danach die modal.js-Datei. (Die Schaltfläche zum Öffnen des Modals befindet sich in einem Formular.) Ich entferne einfach den Import für modal.js und es funktioniert für mich.

0
pableiros