Bootstrap Modal disparaît immédiatement

Je travaille sur un site Web utilisant bootstrap.

Fondamentalement, je voulais utiliser un modal dans la page d'accueil, invoqué par le bouton dans 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 apparaît et disparaît immédiatement.

J'apprécierais toute aide.

De plus, 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 ennuyeux.

Une cause probable

Il s'agit d'un comportement typique lorsque le JavaScript du plug-in Modal est chargé deux fois. Veuillez vérifier que le plugin n'est pas chargé deux fois. Selon la plateforme que vous utilisez, le code modal peut être chargé à partir d'un certain nombre de sources. Certains des plus courants sont:

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

Conseils de débogage

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

Malheureusement, ceux-ci ne trouveront pas toujours des choses dans tous les cas. L'inspection des requêtes 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 (cassée)

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

Plunker

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

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

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

Quand 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 corrigé cela en ajoutant type="button"à l'élément bouton, afin qu'il ne soumette pas le formulaire lorsque vous cliquez dessus.

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

data-toggle="modal"

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

J'ai cherché pendant un certain temps une référence de bootstrap en double dans mon application mvc, après les autres réponses utiles sur cette question.

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

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

J'ai donc retiré le bootstrap.min.jsde mon bundle.configet tout a bien fonctionné.

Même symptôme, dans le cadre d'une application Rails avec Bootstrap fourni par la bootstrap-sassgemme, et la réponse de @ merv m'a mis sur la bonne voie.

Mon application.jsdossier comportait les éléments suivants:

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

Le correctif consistait à supprimer l'une des deux lignes. En effet, le fichier Lisez-moi du bijou vous avertit de cette erreur. Ma faute.

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

e.preventDefault(); avec jquery ui

Pour moi, ce problème s'est produit avec le remplacement de la méthode de clic sur un bouton jquery ui, provoquant un rechargement de page au clic par défaut.

Le problème peut également se produire si vous utilisez jquery vous attachez un écouteur d'événements deux fois. Par exemple, vous définiriez sans relier:

            $("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

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 l'a suggéré @Bhargav, mon problème était dû au bouton qui tentait de soumettre le formulaire et de recharger la page. J'ai changé le bouton en <a>lien comme suit:

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

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

REMARQUE: Je n'ai pas encore assez de réputation pour simplement ajouter un commentaire ou un vote positif, et j'ai senti que je pouvais ajouter un petit éclaircissement.

Moi aussi, j'ai eu le même problème, mais pour moi, cela se produisait parce que j'avais un bouton de type "soumettre" 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ésolu le problème de la disparition.

Dans mon cas, je n'avais qu'un seul fichier bootstrap.js, jquery.js inclus mais obtenant toujours ce type d'erreur, et mon code pour le bouton était quelque chose comme 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 (); 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>

J'ai rencontré ce problème moi-même aujourd'hui et il se trouvait que ce n'était que dans Chrome. Ce qui m'a fait réaliser 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);
}

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

Voici ma solution:

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

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

J'ai appelé modal en javascript en utilisant

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

Avant l'erreur que 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.

Ensuite, je modifie ce code de bouton comme ceci

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

alors le problème est résolu juste une erreur en raison de l'absence de # dans le premier.

voyez si cela vous sera utile.

Encore une autre cause / solution! J'avais 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 est entrée dans le code et a provoqué l'ouverture et la fermeture du modal. Dans mon cas, data-targetet data-toggleen html selon les documents Bootstrap, déclenchez déjà le modal pour fonctionner. Le code JS est donc redondant et lorsqu'il est supprimé, il fonctionne.

J'ai eu le même problème en travaillant sur un projet avec asp.NET. J'utilisais bootstrap 3.1.0 pour le résoudre en rétrogradant vers Bootstrap 2.3.2.

Moi aussi, j'ai eu le problème, si le bouton est à l'intérieur d'un tag puis le modal apparaît une fois et disparaît assez tôt, en retirant le bouton du formulaire corrigé. Merci je me suis retrouvé dans ce fil! +1 à tous.

J'étais confronté au même problème lors des tests sur les appareils mobiles et cette astuce a fonctionné pour moi

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

Remplacez le bouton par une balise d'ancrage qui devrait fonctionner, le problème se produit en raison de son bouton de type lors de la tentative de soumission, le modal disparaît immédiatement <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .

Dans mon cas, j'avais le CDN inclus dans la tête du fichier application.html.erb et j'ai également installé le joyau «jquery-rails», que je suppose grâce à la documentation et aux publications ci-dessus, est redondant.

J'ai simplement commenté le CDN (ci-dessous) du responsable du fichier application.html.erb et le modal reste ouvert de manière appropriée.

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

J'avais aussi le même problème. Le problème avec moi était que j'affichais le modal en appuyant sur un lien et en demandant une 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 afin que le lien n'aille nulle part et cela ait résolu mon problème.

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

Avez-vous essayé de supprimer

data-dismiss="modal"

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.

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

au cas où quelqu'un utiliserait bootstrap codeigniter 3 avec datatable.

ci-dessous est mon correctif 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'

J'ai dû faire face au même problème. La raison est la même que la @merv. Le problème venait d'un composant de calendrier ajouté à la page. Le composant lui-même ajoute la fonctionnalité modale à utiliser dans la fenêtre contextuelle du calendrier.

Ainsi, les raisons de briser le popup de modèle seront l'une ou plusieurs des suivantes

• Chargement de plusieurs versions / fichiers bootstrap js (minifiés ...)
• Ajout d'un calendrier externe à la page où le bootstrap est utilisé
• Ajout d'une bibliothèque d'alerte ou de popup personnalisée à la page
• Toute autre bibliothèque qui ajoute un comportement contextuel

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

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

component.ts

NOTE: besoin d'importer jquery dans le fichier ts comme "declare var $: any;"

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

Modifications que j'ai apportées:

• supprimé "data-toggle =" modal "de la balise Button (grâce à @miCRoSCoPiC_eaRthLinG cette réponse m'aide ici) dans mon cas, son affichage modal j'ai donc créé (cliquez) =" showresult () "

• inside component.ts doit déclarer Jquery ($) et la méthode click interne du bouton showresult () appelle "$ ('# myModal'). modal ('show');"

J'ai eu le même problème parce que je basculais mon modal deux fois comme indiqué ci-dessous:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

J'ai supprimé une occurrence de:

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

et cela a fonctionné comme par magie!