Bootstrap modal: l'arrière-plan saute en haut en bascule

111

J'ai un problème, avec un modal. J'ai un bouton sur une page, qui bascule le modal. Lorsque le modal apparaît, la page saute en haut.

J'ai fait tout ce que j'ai pu pour trouver une solution / etc, mais je suis vraiment perdu.

ÉDITER:

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

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
source
Bonjour Benni. Oui, je le suis avec défi. J'ai aussi essayé avec: $ ('# myModal'). Modal ('show'); mais il a exactement le même effet.
— FooBar
1
cela peut-il vous aider, même problème: stackoverflow.com/questions/12894570/…
— Mark
@Mark, voir ma réponse ci-dessous ...
— Ravimallya
J'ai remarqué que si je clique n'importe où dans windowle fichier modal se déclenche. Cela semble étrange et inattendu. J'ai supprimé les buttonvia devtools et cliquer n'importe où sur la page ouvrait toujours la fenêtre modale. Était-ce le comportement souhaité? Je me demande si vous n'avez pas le bon sélecteur pour l'événement de clic modal.
— dward

Réponses:

174

Lorsque le modal s'ouvre, une modal-openclasse est définie sur la <body>balise. Cette classe définit overflow: hidden;le corps. Ajoutez cette règle à votre feuille de style pour remplacer le style bootstrap.css:

body.modal-open {
    overflow: visible;
}

Le parchemin doit maintenant rester en place.

— pstenstrm
source
@pstenstrm, j'ai un doute. vous avez dit de remplacer le css pour la classe .modal-open. Mais que se passe-t-il s'il y a des div de fermeture supplémentaires et que dans ma réponse, je n'ai remplacé aucune classe dans ma résolution? Cela fonctionne bien après avoir supprimé 2 div supplémentaires. bs modal ajoutant .modal-backdrop div qui deviendra confus là où il devait être fermé à cause des balises de fermeture supplémentaires.
— Ravimallya
4
Cela ne fonctionne pas pour moi, j'ai le modal dans un iframe et il défile vers le haut ... des idées?
— Cabuxa.Mapache
5
Cela a réglé le problème pour moi. Juste pour ajouter la racine de mon problème était 'body {height: 100%}'.
— PeteG
23
Ne travaille pas pour moi. J'ai un modal vanille avec lequel j'ouvre .modal('show')et il défile toujours en haut de la page. Bootstrap v3.2.0
— MandM
6
J'ai dû ajouter position: inherità cette classe mais j'ai travaillé comme un charme après cela.
— adrian3martin
28

Si vous appelez modal avec tag. Essayez de supprimer '#' de l'attribut href et appelez modal avec des attributs de données.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— Gokhan
source
Je l'ouvre exactement comme vous l'avez publié. Consultez le lien
— FooBar
5
si vous n'utilisez pas le "<button>" mais <a>, comme dans mon cas, vous perdez l'icône "bouton du doigt" lorsque vous déplacez le curseur de la souris sur l'objet. Pour surmonter cela, je l'ai fait: ... href = "# mai_modal_id" data-toggle = "modal" ... et je n'ai pas utilisé data-target
— pagurix
3
@pagurix - Votre commentaire a fonctionné le mieux pour mon scénario.
— AlfredBr
Je pense que @pagurix devrait écrire son commentaire comme une réponse distincte. Seule chose qui a aidé. Pouces vers le haut!
— Vibhor Dube
14

si vous utilisez une balise d'ancrage en tant que problème <a href"#" ..> ... </a>et que vous href="#"créez un problème, supprimez-le. Vous pouvez en savoir plus ici

— Nimesh Jain
source
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Cela vous aidera à arrêter la barre de défilement en haut.Cela a fonctionné pour moi

— Georgi Mirchev
source
5

Peut-être travailler avec des modaux imbriqués quelque part dans le code:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Pour moi, c'était une combinaison de position, de hauteur et de débordement.

— Dennis Heiden
source
4

Je ne vois pas d'erreur spécifique, mais je vous conseillerais de vérifier votre syntaxe html .

Un petit test avec votre source me donne des erreurs comme

Ligne 127, colonne 34: élément non fermé div.

              <div class="inner onlySides">

Cela pourrait être un problème.

— billyJoe
source
Merci - je vais examiner ceci - même si j'ai du mal à croire que cela puisse déclencher le problème que je rencontre. Il semble que vous utilisez un plugin pour le suivre - si oui; lequel?
— FooBar
je n'utilise pas de plugin sauf firebug. C'est toujours une bonne chose de vérifier la validité de votre page sur validator.w3.org . Ce serait un problème car si vous avez une div non fermée, vous aurez un comportement étrange :)
— billyJoe
4

Le moyen le plus simple de résoudre l'arrière-plan sautant est de définir deux paramètres:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Nils
source
3

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

Essayez de commenter votre code de:

<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 utilisez plutôt Bootstrap 2.3.2:

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

Cela a fonctionné pour moi.

Je l'ai essayé avec Bootstrap version 3 mais cela n'a pas fonctionné. Je suis toujours incapable de localiser la partie problématique, mais quelque part le long de Firebug m'a jeté une e.preventDefault() is not a functionerreur - je suppose que cela devrait être la cause principale, mais je ne l'ai pas encore comparée avec les autres fichiers JS.

— AyB
source
3

J'ai essayé de placer le haut .modal au centre de l'écran. 

.modal {
    position: absolute;
    top: 50%;
}

Juste mes 2 cents de pensées.

— Holger Thiebosch
source
Assez proche. Je ne voterai pas parce que mon problème est peut-être ailleurs, mais cela a entraîné une atténuation de la moitié inférieure de l'écran, mais le modal était positionné vers le centre.
— crafter
3

Dans bootstrap 3.1.1, j'ai résolu avec cette solution:

body.modal-open {
    position: absolute !important;
}
— Filo
source
2
Vous avez sauvé ma journée @Filo Merci beaucoup
— vinothini
2

vous avez 2 divbalises de fermeture supplémentaires juste avant <div id="footer">ou après le<div id="mainFrame" class="group"> div. J'utilise Visual Studio 2012 Express pour inspecter cela.

Veuillez supprimer ces 2 div supplémentaires et dites-nous comment cela fonctionne. J'ai supprimé les div supplémentaires et supprimé tous les scripts personnalisés. conservé uniquement le noyau jquery et le bootstrap au pied de page. voici la capture d'écran de la sortie finale. ici le terrain de jeu jsbin pour vous qui fonctionne très bien.

Je vous suggère d'utiliser headjs pour charger tous les scripts et fichiers css. ce n'est pas non plus une bonne pratique de charger deux fois des scripts.

entrez la description de l'image ici

— Ravimallya
source
4
Les réponses défavorables nécessitent des commentaires appropriés et des raisons.
— Ravimallya
2

Essayez d'utiliser ceci pour ouvrir modal et voir ce qui se passe:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— scooterlord
source
2 
body.modal-open {
overflow: visible !important;
}

J'avais besoin de l'attribut important pour le réparer

— Étourdissement
source
Cela a fonctionné pour moi, et j'ai eu le problème de @ MandM (dans les commentaires) de la réponse de pstenstrm: "Ne fonctionne pas pour moi. J'ai un modal vanille que j'ouvre avec .modal ('show') et il défile toujours en haut de la page. Bootstrap v3.2.0 ". Le seul effet étrange qu'il a est que maintenant l'arrière-plan défilera si vous continuez à faire défiler un modal plus grand que la fenêtre, mais c'est un problème mineur pour moi. Merci.
— dgig
1

J'ai eu le même problème avec Bootstrap 2.3.2

C'était un problème pour cliquer sur un lien:

L'astuce était: retourner faux;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

et les js:

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
source
1

J'ai passé des heures à essayer de tout ici et ailleurs. Pour l'utilisation angularjs-material, il s'est avéré que je devais désactiver l'animation sur l'objet de configuration uibModal.open arg.

Par exemple:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

J'espère que ceci aide quelqu'un d'autre.

— Plage de Nathan
source
1

Si vous rencontrez ce problème dans un programme Angular, ajoutez le code ci-dessous à la première ligne du fichier .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— panda sibashankar
source
0

J'ai eu le même problème et je pense que je l'ai compris. Il vous suffit de placer le HTML modal en tant qu'enfant direct de la balise body ! Vous pouvez cependant placer le code HTML du bouton déclenchant le modal là où vous en avez besoin. Je pense que cela évite l'héritage CSS et les problèmes de position qui déclenchent ce problème.

Exemple:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
— Nunoarruda
source
0

Finalement compris celui-ci. N'enveloppez PAS le bouton ciblant le modal dans une balise d'ancrage.

Mauvais

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Bien

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
source
0

Celui-ci l'a fait pour moi

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— spirituel
source
J'avais un problème similaire avec la barre de navigation et le saut de conteneur lorsque le modal était ouvert. C'est ce que je cherchais.
— Awhitey98
Heureux que cela ait aidé!
— warkitty
0

Après avoir lu des dizaines de réponses sur plusieurs heures, j'ai copié à nouveau le code original du fichier d'amorçage et débogué étape par étape pour voir ce qui a causé cela, je saute toujours au sommet. Parce que la dernière version actuelle de Bootstrap 3 affiche le modal à la position que vous êtes en ce moment. J'avais découvert que -webkit-transform: translate3d(0,0,0);et height: 100%dans mon css body-tag provoquait ce comportement. Peut-être que cela aide quelqu'un.

— AlexioVay
source
0

Pour moi fonctionne lorsque j'ai changé la version de 3.1.1 à 3.3.7

Si vous n'avez pas besoin d'utiliser la version 3.3.1, essayez de remplacer.

Après le changement, il est bon de vérifier que le reste de la fonction fonctionne correctement.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— Pyot
source
0

body.modal-open { position: inherit; }

Cela a fonctionné comme un charme pour moi.

— Goel Nimish
source
0

J'ai essayé tous les exemples ci-dessus - c'est la seule chose qui a fonctionné pour moi:

.modal-open {

            padding-right: 0 !important;

        }

Retirer le rembourrage du côté droit du modèle - empêche le saut.

— Stnfordly
source
0

hauteur: 100% est résoudre le problème, mais vous devez ajouter le bon "div"

— Anar Ali
source
0

J'ai eu le même problème et aucune des réponses ne m'a aidé. J'ai trouvé une solution de contournement qui a l'air stupide mais qui fonctionne au moins dans mon cas.

J'ai trouvé que la page ne défilait vers le haut qu'une seule fois et qu'après cela, les prochains modaux ouverts fonctionnaient comme prévu. Ensuite, j'ai trouvé que le fait de cacher tout élément du DOM déclenche le même étrange parchemin. Donc, je viens de créer un div factice après le chargement de la page que de le cacher et de le supprimer, ce qui a résolu le problème.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— Borzilo Andrey
source
0

J'étais confronté au même problème. Le problème était que j'ajoutais une classe .modal-open aux éléments html et body. Ajoutez simplement cette classe à body et tout fonctionne comme prévu.

— général666
source
-1

Essayez ceci, cela fonctionne parfaitement

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— minimiser
source
-3

Si la réponse de pstenstrm ne fonctionne pas pour vous, essayez de la combiner avec ce bouton de remplacement HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Cela devrait garder le bouton à l'écran.

— Ben
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.