Fenêtre contextuelle modale en dehors de la fenêtre du navigateur

Question

J'ai une fenêtre contextuelle sur mon site pour une inscription. Lorsque cette fenêtre s'ouvre sur un téléphone, elle est trop élevée pour le port d'affichage du navigateur et une partie du contenu en sort.

Lorsque je tente de faire défiler vers le bas, il défiler l'arrière-plan. Si je bloque l'arrière-plan avec overflow-y: hidden, rien ne défile du tout.

La fenêtre défile avec la fenêtre, verrouillée au même endroit. Je voudrais ne pas verrouiller la position en haut de la page, et l'avoir toujours apparaître en haut du port d'affichage, mais il devrait être possible de faire défiler pour voir tout son contenu.

Est-ce que quelqu'un sait comment résoudre ce problème?

Answer 1

Regardez Bootstrap modal manager grand exemple. Ils suppriment le débordement dans le corps (overflow: caché) et ont un wrapper full width/height pour le modal, ce wrapper a overflow: auto; et cela rend l'apparance plus que la page du corps est statique et le défilement des pages ne déplace que le modal.

Answer 2

Vous pouvez utiliser media types d'écrire des règles CSS pour les appareils mobiles, tablettes, etc., par exemple si vous voulez la capacité de défilement en vous le contenu modal que vous pouvez faire quelque chose comme:

@media (max-width: 767px) { 
    .modal-content { overflow-y: scroll; } 
}