113 votes

Bootstrap modal: arrière-plan les sauts vers le haut sur le bouton

J'ai un problème, avec un modal. J'ai un bouton sur une page, qui permet de basculer le modal. Lorsque le modal affiche, les sauts de page haut de page.

J'ai fait tout mon possible pour trouver une solution/etc, mais je suis vraiment perdu.

EDIT:

J'ai aussi essayé avec: $('#myModal').modal('show'); mais il a exactement le même effet.

178voto

pstenstrm Points 1372

Lorsque la modale s'ouvre un modal-open classe est fixé à l' <body> balise. Cette classe définit overflow: hidden; pour le corps. Ajouter cette règle à votre feuille de style pour remplacer le bootstrap.de style css:

body.modal-open {
    overflow: visible;
}

Maintenant, le défilement doit rester en place.

30voto

Gokhan Points 249

Si vous appelez modal avec un tag. Essayez de supprimer les '#' partir de l'attribut href.Et appel modal avec des attributs de données.

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

5voto

billyJoe Points 405

je ne vois pas d'erreur spécifique, mais je vous conseille de vérifier votre syntaxe html un petit test avec votre source me donne des erreurs de ce type

La ligne 127, Colonne 34: Unclosed élément div.

              <div class="inner onlySides">

Cela pourrait être un problème.

3voto

I Can Has Kittenz Points 4505

J'ai essayé de reproduire ce problème sur mon localhost, et aussi bizarre que cela puisse paraître, il y a un conflit avec le Bootstrap fichier JS que vous utilisez.

Essayez de commenter votre code:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>    

Et au lieu d'utiliser Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

De ce fait le travail pour moi.

Je l'ai essayé avec de démarrage de la version 3, mais cela ne fonctionne pas. Je suis toujours pas en mesure d'identifier la difficulté de la partie, mais quelque part le long de Firebug me jeta un e.preventDefault() is not a function d'erreur - je suppose que ce doit être la racine de la cause, mais je suis encore à la comparer avec les autres fichiers JS.

2voto

Ravimallya Points 2040

vous avez 2 supplémentaires de clôture div tags juste avant l' <div id="footer"> ou après l' <div id="mainFrame" class="group"> div. Je suis à l'aide de visual studio 2012 express pour inspecter ce.

Veuillez supprimer ces 2 divs et laissez-nous savoir comment il fonctionne. J'ai enlevé supplémentaire divs et supprimé tous les scripts personnalisés. conservés uniquement de base jquery et bootstrap en pied de page. voici le sreenshot de la production finale. ici est le jsbin aire de jeux pour vous qui fonctionne bien.

Je vous suggère d'utiliser headjs pour charger tous les scripts et les fichiers css. aussi il n'est pas une bonne pratique de loadidng tous les scripts deux fois.

enter image description here

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X