Bootstrap fermer la modale ne fonctionne pas
J'ai deux bouton ici qui sont utilisés pour fermer la modale. La première est l'icône de fermeture et l'autre est un bouton annuler, à la fois l'utilisation des données-rejeter pour fermer la modale. Cependant, deux d'entre eux ne sont pas de travail. J'utilise le même code pour un autre modal et là, ils fonctionnent très bien. Toutes les suppositions?
<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
<div class="modal-dialog">
<div id="timeSelectModalContent" class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<label>
<input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
<label class="checkbox-label">Thursday, 08:00 pm.</label>
</label>
<br>
<label>
<input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
<label class="checkbox-label">Thursday, 09:30 pm.</label>
</label>
<div id="time-modal-footer" class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
</div>
</div>
</div>
</div>
- C'est vieux, mais avez-vous essayé de supprimer " style="display: none"`? Il s'avère que l'utilisation qu'au lieu de Bootstrap de classes/méthodes pour l'affichage et le masquage peut provoquer les choses pour les casser.
- ce fil est vieux, mais lorsque j'ai jamais été confronté à ce problème, il a été question de donner des z-index pour la "X" bouton.
Vous devez vous connecter pour publier un commentaire.
Très vieux sujet, mais il apparaît toujours en premier pour les personnes en recherche de ce problème, probablement causée par faire la même erreur que j'ai fait qui a été omis de veiller à ce que le modal div était à l'extérieur du corps de la div à partir de laquelle il a été lancé. Pour utiliser le Kit de Matériel comme un exemple, vous devriez vérifier que la cible "#myModal" div est à l'extérieur de la clôture de la balise div pour votre conteneur principal.
Vérifiez d'abord que vous avez inclus bootstrap.js fichier dans votre code html correctement.
Vous pouvez essayer ce code et remplacer le bouton de la balise de fermeture de modal par
Si ne fonctionne toujours pas.. Laissez-moi savoir.!
Vous pouvez ajouter un événement de clic sur le bouton fermer dans jQuery. Ce
.modal("show")
,data-dismiss="modal"
n'est pas assez pour fermer la modale donc je dois$("#mymodal .close").click(function(){$("#mymodal").hide();});
Voici ma mise en œuvre d'un modal vous pouvez utiliser pour comparer à aider à résoudre ce que l'existence d'erreurs dans votre code modal.
$('button[data-dismiss="modal"]').click(function(){ $(this).parent().parent().parent().parent().modal('hide'); })
supprimer le "fondu" de la classe.
HTML:
changement de
Toujours essayer de placer un modal du code HTML dans un haut-niveau de poste dans votre document afin d'éviter d'autres composants qui influent sur la modale de l'apparence et/ou la fonctionnalité.
Pour moi modal n'était pas fermée parce que les fichiers de script avait un conflit quelque part, donc utilisé minimum requis des fichiers de script pour vérifier le problème de la fermeture de modèle.Façon j'ai ajouté des scripts pour le modèle a été d'obtenir correctement fermé
Et pour sûr, je l'avais ajouté bootstrap.min.css styles.
utiliser ce code de fermer le modèle