Bootstrap données modales rejeter ne fonctionne pas

Donc, le data-dismiss="modal" ne fonctionne pas pour les boutons qui sont ajoutés dans mon code HTML, mais travaille pour les boutons qui sont ajoutés à la modale via JS insérer le bouton HTML. Cela me fait figure qu'il ya quelque chose de mal avec où/dans quel ordre j'ai ajouté mes balises de script.

Mes balises de script sont dans cet ordre:

<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>

J'ai essayé de les mettre dans le <head>. J'ai déménagé à être la dernière chose que juste avant </body>. J'ai déménagé à être juste avant et juste après le modal html.

Mise à JOUR

Voici une version simplifiée de mon code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site-bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div id="Popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div id="PopupHeader">
<button type="button" id="PopupX" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 id="PopupTitle" class="modal-title floatLeft"></h4>
<div class="clear"></div>
</div>
<div class="modal-body bgColorWhite">
<div id="PopupContent">Test</div>
</div>
<div id="PopupButtons" class="modal-footer bgColorWhite">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
</body>
</html>

Une autre remarque:

Si j'ajoute le bouton "Fermer", aka le X, via JS, il fonctionne aussi bien. C'est de l'avoir déjà dans le modal qui provoque des problèmes.

Des suggestions?

Vous devriez mettre une version simplifiée de votre code dans le post. Votre hypothèse pourrait être mal. Je ne vois pas ce que serait la cause de votre écarter de ne pas travailler.

OriginalL'auteur ScubaSteve | 2014-11-13

  1. 1

    J'ai été en mesure de comprendre mon problème. C'est que dans mon fichier JS, je voulais ajouter dans chaque événement de clic de bouton, de l'événement.stopPropagation(); étant donné que c'était une méthode, et je ne voulais pas que cela ajoute plusieurs fois sur le même bouton à chaque fois qu'il a été appelé, je voudrais supprimer la précédente cliquez sur les événements, qui a été la suppression de Bootstrap de rejeter cliquez sur l'événement.

    Donc, si vous avez cette même question, et vous avez tous de Bootstrap JS ajouté correctement, vérifiez que votre propre code pour assurez-vous que vous n'êtes pas écraser/retrait d'événements.

    Mise à JOUR

    Juste pour clarifier, de l'événement.stopPropagation() empêche de données démettre de travail.

    pour moi, c'était e.preventDefault() qui ruinée

    OriginalL'auteur ScubaSteve

  2. 0

    Essayer de mettre en "modal-content' div:

    <div class="modal-header">...</div>
<div class="modal-body">
...
your content
...
</div>
<div class="modal-footer">
... 
your buttons
...
</div>
    Je ne suis pas sûr de ce que tu veux dire. Ces trois choses que je ne avoir à l'intérieur modal-content.

    OriginalL'auteur luchopintado