Modale défilable Twitter bootstrap

Question

Je suis en utilisant twitter bootstrap pour un projet que je suis en train de travailler sur.

J'ai une fenêtre modale qui a un peu plus de forme et je n'aime pas que lorsque la fenêtre est trop petite, le modal n'a pas de défilement (si tout simplement disparu de mon page, ce qui n'est pas de défilement).

Pour corriger cela, j'ai utilisé le code css suivant

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Cela fonctionne exactement de la façon dont je veux qu'il en Chrome (qui est, le formulaire est complet taille lorsque la fenêtre est assez grand, mais que la fenêtre réduit la taille modale rétrécit et devient de défilement). Le problème est que dans IE le modal est hors de l'écran. Quelqu'un aurait-il une meilleure solution à ce problème?

Mon exemple peut être trouvé à tinyhousemap.com (cliquez sur "Ajouter une Entrée à la carte" dans la fenêtre de navigation pour le modal à paraître)

Merci

Answer 1

Que diriez-vous de la solution ci-dessous? Cela a fonctionné pour moi. Essaye ça:

 .modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}
 

Détails:

1. supprimer "overflow-y: auto;" ou "débordement: auto;" de la classe .modal (important)
2. supprimer "hauteur maximale: 400px;" de la classe .modal (important)
3. Ajouter "hauteur maximale: 400px;" to modal .modal-body (ou quoi que ce soit, peut être 420px ou moins, mais ne dépasserait pas 450px)
4. Ajoutez "overflow-y: auto;" to .modal .modal-body

Fait, seul le corps défilera.

Answer 2

J'ai fait une petite solution en utilisant uniquement jQuery.

Tout d’abord, vous devez ajouter une classe supplémentaire à votre <div class="modal-body"> j’ai appelé "ativa-scroll", ainsi cela devient quelque chose comme ça:

<div class="modal-body ativa-scroll">

Alors maintenant, mettez ce morceau de code sur votre page, près de votre chargement JS:

 <script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>
 

Je travaille parfaitement pour moi, également de manière réactive! :)

Answer 3

Essayez de remplacer les bootstrap:

  .modal {
position: fixed;
 

Avec:

 .modal {
position: absolute;
 

Cela a fonctionné pour moi.

Answer 4

Je viens de trouver une solution, ça a l'air bien:

https://github.com/jschr/bootstrap-modal/

Answer 5

Il y a une démo géniale de votre solution

http://jschr.github.io/bootstrap-modal/