Bootstrap modal: sauts en arrière-plan vers le haut sur la bascule

si vous appelez modal avec tag. Essayez de supprimer ' # ' de l'attribut href.Et appel modal avec attributs de données.

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

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

cela vous aidera à arrêter la barre de défilement allant sur le dessus.Il a fonctionné pour moi

peut-être travaillant 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.

je ne vois pas d'erreur spécifique, mais je vous conseille de vérifiez votre syntaxe html .

un petit test avec votre source me donne des erreurs comme

ligne 127, colonne 34:

              <div class="inner onlySides">

Cela pourrait être un problème.

si vous utilisez l'étiquette d'ancrage comme <a href"#" ..> ... </a> et href="#" crée un problème, supprimez cela. Vous pouvez lire plus sur ici

j'ai essayé de répliquer ce problème sur mon serveur 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 à la place utiliser Bootstrap 2.3.2:

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

ça m'a fait du bien.

j'ai essayé avec Bootstrap version 3 mais ça n'a pas marché. Je suis toujours incapable de mettre le doigt sur la partie trouble mais quelque part le long de Firebug m'a jeté une erreur e.preventDefault() is not a function - je devine que cela devrait être la cause racine, mais je suis encore à comparer avec les autres fichiers JS.

j'ai essayé de mettre .modal haut au centre de l'écran.

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

Seulement mes 2cents de pensées.

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

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

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

j'avais besoin de l'attribut important pour le corriger

vous avez 2 étiquettes de fermeture supplémentaires div juste avant au <div id="footer"> ou après le <div id="mainFrame" class="group"> div. J'utilise visual studio 2012 express pour inspecter ça.

veuillez supprimer ces 2 divs supplémentaires et nous faire savoir comment cela fonctionne. J'ai supprimé les divs supplémentaires et supprimé tous les scripts personnalisés. ne conserver que jQuery core et bootstrap au pied de page. voici le sreenshot de la production finale. ici est le terrain de jeu jsbin pour vous qui fonctionne fin.

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

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>

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

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

Le truc, c'était: 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');
}

j'ai eu le même problème et je pense que je l'ai trouver. vous avez juste besoin de placer le HTML modal comme un enfant direct de la balise corporelle ! Vous pouvez placer le code HTML pour le bouton déclenchant le modal où que vous ayez besoin. Je crois que cela évite les héritages 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>

Enfin compris. Ne pas envelopper le bouton ciblant le modal dans une étiquette d'ancrage.

Mauvais

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

bon

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

Cela fait pour moi

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

après avoir lu des dizaines de réponses pendant plusieurs heures, j'ai copié le code original du fichier bootstrap et j'ai débogué étape par étape pour voir ce qui causait que je montais toujours au sommet. Parce que la dernière version actuelle de Bootstrap 3 montre le modal à la position où vous êtes en ce moment. J'avais découvert que -webkit-transform: translate3d(0,0,0); et height: 100% dans ma balise CSS avait causé ce comportement. Peut-être que cela aide certains.

Pour moi fonctionne quand je changé la version de 3.1.1 à 3.3.7

si vous ne devez pas utiliser la version 3.3.1 essayer 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>

body.modal-open { position: inherit; }

Cela a fonctionné comme un charme pour moi.

j'ai passé des heures à tout essayer ici et ailleurs. Pour angularjs-utilisation du matériel, il s'est avéré que j'ai dû désactiver l'animation sur l'uibModal.ouvrir l'objet de configuration arg.

par exemple:

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

J'espère que ça aidera quelqu'un d'autre.

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 sur l'écran.

Essayez cela, il fonctionne parfaitement

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

c'est une bonne idée pour le réparer, il ressemble à jock!

juste assez, ajouta l'un des deux code css dans votre style

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

.body.modal-open { height:auto;padding-right:0px !important;}

https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449