web-dev-qa-db-fra.com

Bootstrap modal: l’arrière-plan passe au sommet de la bascule

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 passe en haut.

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

MODIFIER:

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

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
91
FooBar

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

body.modal-open {
    overflow: visible;
}

Maintenant, le parchemin doit rester en place.

153
pstenstrm

Si vous appelez modal avec tag. Essayez de supprimer '#' de l'attribut href. Appelez ensuite modal avec les attributs de données.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
24
Gokhan
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

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

9
Georgi Mirchev

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

5
Nimesh Jain

Travailler éventuellement 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, hauteur et débordement.

4
Dennis Heiden

Je ne vois pas d'erreur spécifique, mais je vous conseillerais de vérifiez 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.

4
billyJoe

J'ai essayé de reproduire ce problème sur mon hôte local et aussi bizarre que cela puisse paraître, il existe 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 ne suis toujours pas en mesure de localiser le problème mais quelque part le long de Firebug m'a jeté une erreur e.preventDefault() is not a function - je suppose que cela devrait être la cause fondamentale, mais je ne l'ai pas encore comparé aux autres fichiers JS.

3
I Can Has Kittenz

J'ai essayé de régler .modal en haut au centre de l'écran. 

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

Juste mes 2cents de pensées. 

3
Holger Thiebosch

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

Veuillez supprimer ces 2 divs supplémentaires et laissez-nous savoir comment cela fonctionne. J'ai supprimé les divs supplémentaires et tous les scripts personnalisés. ne retient que jquery core et bootstrap au pied de page. voici le screenshot de la sortie finale. ici est le terrain de jeu de jsbin qui fonctionne bien. 

Je vous suggère d'utiliser headjs pour charger tous les scripts et fichiers css. En outre, il est déconseillé de charger deux fois un script. 

enter image description here

2
Ravimallya
body.modal-open {
overflow: visible !important;
}

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

2
Dizzle

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

body.modal-open {
    position: absolute !important;
}
2
Filo

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>
2
scooterlord

body.modal-open { position: inherit; }

Cela a fonctionné comme un charme pour moi. 

0
Nimish goel

J'ai eu le même problème et je pense que je l'ai compris. Il vous suffit de placer le code HTML modal en tant qu'enfant direct de la balise body ! Vous pouvez placer le code HTML du bouton déclenchant le modal partout où vous en avez besoin. Je crois que cela évite les problèmes d'héritage CSS et 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>
0
nunoarruda

Celui-ci l'a fait pour moi

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
0
warkitty

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

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

L'astuce était la suivante: return false;

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

et le js:

function openModal() {
    $('#myModal').modal('show');
}
0
mpccolorado

Enfin compris celui-ci . Ne pas envelopper le bouton ciblant le modal dans une balise anchor.

Mal

<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>
0
ALFmachine

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

.modal-open {

            padding-right: 0 !important;

        }

Le retrait du rembourrage du côté - droite du modèle empêche le saut.

0
Stnfordly

Après avoir lu des dizaines de réponses sur plusieurs heures, j'ai copié à nouveau le code d'origine du fichier d'amorçage et procédé au débogage, étape par étape, pour voir la cause de ce changement. Parce que la dernière version de Bootstrap 3 montre le modal à la position où vous vous trouvez. J'avais découvert que -webkit-transform: translate3d(0,0,0); et height: 100% dans mon tag body css étaient à l'origine de ce problème. Peut-être que cela aide quelqu'un.

0
AlexioVay

Pour moi, ça marche quand je ai changé la version de 3.1.1 à 3.3.7

Si vous ne devez pas 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>
0
Pyot

Je faisais face au même problème. Le problème était que j'ajoutais la classe .modal-open à des éléments html et body. Ajoutez simplement cette classe au corps et tout fonctionne comme prévu.

0
general666

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

0
Anar Ali

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 défile une seule fois vers le haut, puis que les prochains modaux ouverts fonctionnent comme prévu. J'ai alors découvert que le masquage d'un élément quelconque dans le DOM déclenche le même étrange défilement. Donc, je viens de créer une division fictive après le chargement de la page, puis de la supprimer et de la supprimer, ce qui a résolu le problème.

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

Le moyen le plus simple de résoudre le fond sautant consiste à définir deux paramètres:

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

J'ai passé des heures à essayer tout ici et ailleurs. Pour l'utilisation de 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.

0
Nathan Beach