web-dev-qa-db-fra.com

Impossible de faire fonctionner un modal bootstrap simple

J'essaie de faire fonctionner l'exemple modal d'un simple bootstrap, je suis ce document qui dit "Vous pouvez activer les modaux sur votre page facilement sans avoir à écrire une seule ligne de javascript. Donnez à un élément un contrôle de données attribut -modal qui correspond à un identifiant d'élément modal, ... ", mais j'ai fait tout ce que je pouvais et ai eu une énorme quantité de recherche ne peut toujours pas obtenir ce modal simple à travailler.

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

J'ai soit ceci:

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

ou ca: 

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

bouton pour activer le modal, j’ai également chargé le fichier bootstrap-modal.js sur la page. Sauf si j'ai ajouté une ligne javascript pour gérer l'événement de clic "Launch Modal", lorsque je clique sur "Launch Modal", rien ne se passe, y a-t-il quelque chose que j'ai manqué?

javascriptjquerytwitter-bootstrapmodal-dialog
27
cnherald

J'ai finalement trouvé cette solution de "Sven" et résolu le problème. ce que j'ai fait, c'est que j'ai inclus "bootstrap.min.js" avec:

<script src="bootstrap.min.js"/>

au lieu de:

<script src="bootstrap.min.js"></script>

et cela a résolu le problème qui semblait vraiment étrange. quelqu'un peut-il expliquer pourquoi?

23
cnherald

Fiddle 1: une réplique du modal utilisé sur le site de démarrage de Twitter. (Il s’agit du modal qui ne s’affiche pas par défaut, mais qui se lance lorsque Vous cliquez sur le bouton de démonstration.) 

http://jsfiddle.net/9RcDN/

Fiddle 2: une réplique du modal décrit dans la documentation de bootstrap, Mais qui intègre les éléments nécessaires pour éviter l'utilisation de javascript . Notez tout particulièrement l'inclusion de la classe hide sur #myModal div et l’utilisation de data-dismiss="modal" sur le bouton Fermer. 

http://jsfiddle.net/aPDVM/4/

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Il est également intéressant de noter que le site que vous utilisez fonctionne sous bootstrap 2.0, Tandis que le site officiel d'amorçage de Twitter est activé 2.0.3.

24
mg1075

Jetez également un coup d'œil à BootBox, il est très simple d'afficher les alertes et de confirmer les cases dans un mode de bootstrap. http://bootboxjs.com/

La mise en œuvre est aussi simple que cela:

Alerte normale:

bootbox.alert("Hello world!");

Confirmer:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});

Promt:

bootbox.Prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

Et même coutume:

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);
17
Nick N.

J'ai eu un problème avec Modals aussi. J'aurais dû déclarerjquery.min.jsavantbootstrap.min.js(dans ma page de présentation). Depuis le site officiel: "tous les plugins dépendent de jQuery (cela signifie que jQuery doit être inclus avant les fichiers du plugin)"

10
Anton Petrovskyi

Je rencontre aussi ce problème. J'avais inclus bootstrap.js ET bootstrap-modal.js . Si vous avez déjà bootstrap.js, vous n'avez pas besoin d'inclure popover.

5
Tulio F.

Pour moi, le modal de démarrage apparaissait et disparaissait lorsque j'ai cliqué sur la balise button (dans le balisage, le modal est affiché et masqué à l'aide des seuls attributs de données). Dans mon fichier gulpfile.js, j'ai ajouté le fichier bootstrap.js (qui avait la logique modale) et le fichier modal.js. Je pense donc que, une fois que le navigateur a analysé et exécuté les deux fichiers, deux gestionnaires d’événements click sont attachés à l’élément dom particulier (un pour chacun des fichiers). J'espère que ça aide quelqu'un.

1
agent47

Également,

Si vous exécutez votre page à partir de Visual Studio et que vous avez installé le package d'amorçage, vous devez vous assurer de deux choses

  1. Vous avez également reçu le package Bootsrap Modal Dialog (très important)
  2. Vous l'avez ajouté à bundle.config si vous utilisez le groupement.
0
John Swaringen

Une meilleure solution consiste à charger une version torsadée de bootstrap.js sans jquery. Obtenez-le de http://daniemon.com/blog/bootstrap-without-jquery/

<script src=".../bootstrap-without-jquery.min.js"></script>

En procédant ainsi, vous éviterez des problèmes avec les balises de script. 

0
Long

J'avais ce même problème en utilisant CLI angulaire. J'avais besoin d'importer le fichier bootstrap.js.min dans le fichier .angular-cli.json :

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
0
Flea

Essayez de sauter la balise p ou de la remplacer par une balise h3 ou similaire. Remplacer:

<p>One fine body…</p>

avec

<h3>One fine body…</h3>

Cela a fonctionné pour moi, je ne sais pas pourquoi, mais il semble que le tag p ne soit pas totalement compatible avec certaines versions de Bootstrap.

0
Daniel