web-dev-qa-db-fra.com

Bootstrap Modal disparaît immédiatement

Je travaille sur un site web en utilisant bootstrap.

En gros, je voulais utiliser un modal dans la page d'accueil, appelé par le bouton de l'unité Hero.

Code du bouton:

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

Code modal: 

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

Le problème est que dès que je clique sur le bouton, le modal s’installe puis disparaît immédiatement.

J'apprécierais toute aide. 

Aussi, comment changer la couleur du triangle déroulant (pointant vers le haut, pas de survol)? Je travaille sur un site Web basé sur l'orange et le marron et ce truc bleu est vraiment ennuyant.

twitter-bootstrapmodal-dialog
184
Fonzusys

Une cause probable

C'est un comportement typique lorsque le code JavaScript du plug-in Modal est chargé deux fois. Assurez-vous que le plug-in ne soit pas chargé deux fois. Selon la plate-forme que vous utilisez, le code modal peut être chargé à partir d'un nombre de sources. Certains des plus communs sont:

  • bootstrap.js (la suite complète de BootStrap JS)
  • bootstrap.min.js (comme ci-dessus, juste minifié)
  • bootstrap-modal.js (le plugin autonome)
  • un chargeur de dépendance, par exemple, require('bootstrap')

Conseils de débogage

Un bon point de départ est d'inspecter les écouteurs d'événements click enregistrés à l'aide des outils de développement de votre navigateur. Chrome, par exemple, répertoriera le fichier source JS où se trouve le code permettant d’enregistrer le programme d’écoute. Une autre option consiste à rechercher dans les sources de la page une phrase trouvée dans le code modal, par exemple, var Modal.

Malheureusement, ils ne trouveront pas toujours des choses dans tous les cas. L'inspection des demandes de réseau peut être un peu plus robuste pour vous donner une image de tout ce qui est chargé sur une page.

Une démo

Voici une démonstration de ce qui se passe lorsque vous chargez les fichiers bootstrap.js et bootstrap-modal.js (juste pour confirmer votre expérience):

Plunker

Si vous faites défiler la source vers le bas de la page, vous pouvez supprimer ou commenter la ligne <script> pour le fichier bootstrap-modal.js, puis vérifier que le modal fonctionnera comme prévu.

426
merv

J'ai eu le même problème, mais la cause était différente. J'ai suivi la documentation et créé un bouton comme suit:

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

Lorsque j'ai cliqué dessus, il est apparu que rien ne se passerait. Cependant, le bouton se trouvait dans un <form> qui récupérait temporairement la même page.

J'ai résolu ce problème en ajoutant type="button" à l'élément button, de sorte qu'il ne soumette pas le formulaire lorsque l'utilisateur clique dessus.

72
Rory Hunter

Pour moi, ce qui a fonctionné était de supprimer 

data-toggle="modal"

du bouton. Le bouton lui-même peut être n'importe quel élément - un lien, un div, un bouton, etc. 

17
miCRoSCoPiC_eaRthLinG

J'ai cherché pendant un moment une référence d'amorçage en double dans mon application mvc, après les autres réponses utiles à cette question.

Je l'ai enfin trouvé - il était inclus dans une autre bibliothèque que j'utilisais, alors ce n'était pas évident du tout! (datatables.net).

Si vous rencontrez toujours ce problème, recherchez d'autres bibliothèques susceptibles d'inclure Bootstrap pour vous. (datatables.net vous permet de spécifier un téléchargement avec ou sans bootstrap - les autres font de même).

J'ai donc supprimé le bootstrap.min.js de mon bundle.config et tout a bien fonctionné.

14
John Lucas

Même symptôme, dans le contexte d'une application Rails avec Bootstrap fourni par la gemme bootstrap-sass et la réponse de @ merv me mettent sur la bonne voie.

Mon fichier application.js avait les éléments suivants:

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

Le correctif consistait à supprimer l'une des deux lignes. En effet, le fichier readme de la gemme vous avertit de cette erreur. Ma faute.

12
Giuseppe

Mon code avait en quelque sorte le fichier bootstrap.min.js inclus deux fois J'ai enlevé l'un d'eux et tout fonctionne bien maintenant.

8
Ricardo Pieper

e.preventDefault(); avec jquery ui

Pour moi, ce problème est survenu avec le remplacement de la méthode click sur un bouton jquery ui, provoquant un rechargement de page par clic.

8
LX-3

Le problème peut également se produire si vous utilisez jquery si vous associez deux fois un écouteur d'événement . Par exemple, vous définissez sans dissocier:

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

Si cela se produit, l'événement est déclenché deux fois de suite et le modal disparaît.

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

Voir exemple: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

7
gpasse

J'ai rencontré le même symptôme que @gpasse a montré dans son exemple. Voici mon 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>

Comme @Bhargav l'a suggéré, mon problème était dû au bouton qui tentait de soumettre le formulaire et de recharger la page. J'ai changé le bouton pour un lien <a> comme suit:

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

... et cela a résolu le problème.

NOTE: Je n'ai pas assez de réputation pour simplement ajouter un commentaire ou un vote positif pour le moment, et j’ai pensé que je pourrais ajouter un peu de précision.

5
JDev

Je suis tombé sur ce problème moi-même aujourd'hui et il s'est avéré que ce n'était que dans Chrome. Ce qui m'a fait comprendre que cela pourrait être un problème de rendu… .. Le déplacement du modal spécifique vers son propre calque de rendu l'a résolu.

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

Moi aussi j'ai eu le même problème, mais pour moi, c'était parce que j'avais un bouton de type "submit" dans le formulaire modal. j'ai changé

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

à

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

Et cela a réglé le problème de la disparition.

3
doug

Dans mon cas, je n'avais qu'un seul fichier bootstrap.js, jquery.js inclus, mais j'avais toujours ce type d'erreur et mon code pour le bouton ressemblait à ceci:

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

J'ai simplement ajouté e.preventDefault (); à cela et cela a fonctionné comme un charme.

Donc, mon nouveau code était comme ci-dessous:

<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

Dans mon cas, un clic sur un bouton provoque un rechargement (non voulu) de la page.

Voici ma solution:

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

Dans mon cas, j’ai utilisé le bouton actionlink dans MVC et, face à ce problème, j’ai essayé de nombreuses solutions ci-dessus et d’autres, mais toujours face à ce problème, je me suis rendu compte de mon erreur de code.

J'ai appelé modal en javascript en utilisant 

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

Avant l'erreur, j'utilise ce bouton

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

Je n'ai aucune valeur pour la propriété href dans ce bouton, donc je suis confronté au problème.

Puis j'édite ce code de bouton comme ceci

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

puis le problème se résout juste une erreur en raison de l'absence de # dans le premier.

voyez si cela vous aidera.

2
Saurabh Solanki

J'ai eu le même problème en travaillant sur un projet avec asp.NET. J'utilisais bootstrap 3.1.0 l'a résolu en rétrogradant à Bootstrap 2.3.2.

1
Ago

Je faisais face au même problème lors de tests sur des appareils mobiles et cette astuce a fonctionné pour moi

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

Modifiez le bouton pour ancrer la balise, cela devrait fonctionner, le problème vient de son bouton de type car il essaie de le soumettre, le modal disparaît immédiatement. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> J'espère que cela fonctionnera pour vous. 

1
Bhargav

Encore une autre cause/solution! J'ai eu dans mon code JS:

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

Mais mon code HTML était déjà écrit comme:

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

C'est donc une autre permutation de la façon dont la duplication a saisi le code et a provoqué l'ouverture puis la fermeture du modal. Dans mon cas, data-target et data-toggle au format HTML conformément aux documents Bootstrap déclenchent déjà le fonctionnement du modal. Le code JS est donc redondant et, une fois supprimé, il fonctionne.

0
james

Dans mon cas, le CDN était inclus dans la tête d’application.html.erb et j’avais également installé la gemme 'jquery-Rails', que je devine grâce à la documentation et aux publications ci-dessus, est redondante.

J'ai simplement commenté le CDN (ci-dessous) de la tête de application.html.erb et le modal reste ouvert.

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

Avez-vous essayé d'enlever

data-dismiss="modal"
0
JeffNhan

au cas où quelqu'un utilisant codeigniter 3 booterait avec datatable.

ci-dessous est ma solution dans 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

Je sais que c'est vieux, mais voici une autre chose à vérifier - assurez-vous que vous n'avez qu'un seul attribut data-target =. Je l'avais dupliqué et le résultat était conforme à ce fil.

0
Pete

en travaillant avec Angular (5), je suis confronté au même problème, mais dans mon cas, j'ai résolu le problème suivant:

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

composant.ts

NOTE: il faut importer jquery dans le fichier ts en tant que "declare var $: any;"

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

Les changements que j'ai faits:

  • suppression de "data-toggle =" modal "de la balise Button (grâce à @miCRoSCoPiC_eaRthLinG cette réponse m'aide ici). Dans mon cas, cela montre modal donc j'ai créé (click) =" showresult () "

  • inside composant.ts doit déclarer Jquery ($) et la méthode de clic sur le bouton interne showresult () appelle "$ ('# myModal'). modal ('show');"

0
Bhagvat Lande

Devait faire face au même problème. La raison est la même que le @merv. Le problème était lié au composant calendar ajouté à la page. Le composant lui-même ajoute la fonctionnalité modale à utiliser dans la fenêtre contextuelle du calendrier.

Donc, les raisons de briser le modèle popup seront un ou plusieurs des suivants

  • Chargement de plusieurs versions/fichiers d'amorçage js (minifiés, etc.)
  • Ajout d'un calendrier externe à la page où le bootstrap est utilisé
  • Ajouter une alerte personnalisée ou une bibliothèque contextuelle à la page
  • Toute autre bibliothèque qui ajoute un comportement de popup 
0
Shantha Kumara

J'ai eu le même problème aussi. Le problème avec moi était que je montrais le modal en appuyant sur un lien et en demandant confirmation avec jQuery.

Le code ci-dessous affiche le modal et qui disparaît immédiatement:

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

J'ai fini par ajouter '#' à href pour que le lien n'aille nulle part et cela a résolu mon problème.

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

Moi aussi j'avais le problème, si le bouton est à l'intérieur d'un tag, le modal apparaît une fois et disparaît assez tôt, le bouton du formulaire est résolu. Merci j'ai fini dans ce fil! +1 à tous.

0
satheeshwaran

J'avais ajouté bootstrap à mon projet via bower, puis j'ai importé le fichier bootstrap.min.js et après le fichier modal.js. (Le bouton qui ouvre le modal est à l'intérieur d'un formulaire). Je supprime simplement l'importation pour modal.js et cela fonctionne pour moi.

0
pableiros