Comment faire pour que le popup modal fasse défiler son contenu avec la page?

Question

J'ai un popup modal et quand il charge un contenu qui est plus grand que la hauteur du navigateur, je suis incapable de faire défiler vers le bas pour voir le reste de l'information. Au lieu de cela l'arrière-plan peut défiler mais le popup ne le fera pas. Au lieu de cela, j'aimerais que le menu contextuel reste affiché et lorsque l'utilisateur fait défiler vers le haut ou vers le bas, laissez la fenêtre contextuelle en place et laissez-la défiler jusqu'au bas du contenu. Si vous faites un super long post sur Facebook, la popup fonctionne correctement et j'aimerais savoir comment je peux obtenir le même effet avec ce contrôle.

Answer 1

Mettre le style overflow: auto sur le bloc du récipient.

Answer 2

Dans le CSS de votre popup modal, réglez la largeur du modalpop, puis réglez le overflow:auto. Cela vous donnera une barre de défilement horizontale. Exemple:

.ModalPopupPanel 
{ 
    width:900px; 
    overflow:auto; 
} 

Ainsi, lorsque la largeur du contenu dépasse 900px, la barre de défilement horizontale s'affiche. La même chose est vraie pour la barre de défilement verticale où vous devez définir la hauteur du modalpop.

Answer 3

Ce script définit la hauteur de la fenêtre contextuelle à 90% de la hauteur de l'écran, puis vous pouvez définir le dépassement de capacité: auto;

<script type="text/javascript"> 
    function pageLoad() { 
     $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
    } 
    </script> 

voici une question connexe que je pose et la solution que j'ai trouvée.

asp.net ModalPopupExtender : need to show scroll bar when overflow

Answer 4

Vous pouvez ajouter une classe à l'étiquette du corps lorsque la fenêtre est ouverte pour cacher la barre de défilement, et retirez quand la fenêtre disparaît, votre arrière-plan doit être la position: fixe et la hauteur doit être the window.height() (l'obtenir dynamiquement avec JS), et aussi être overflow: auto. Qu'est-ce qui se passe avec tout ce qui est, si le popup est plus grand que l'arrière-plan, vous obtenez une barre de défilement agréable sur la droite, et parce que votre barre de défilement du corps est cachée, vous voyez seulement celle-là. En outre, la page elle-même ne défile pas. C'est ainsi que Facebook le fait avec leur visionneuse d'images.

Answer 5

Vous pouvez essayer de faire défiler ModalPopup avec ses Contens: Réglez le PopupDragHandleControlID pointant sur un panneau vide, mode de réglage Repositionner = « Aucun » cela permet de garder le modal fixé dans la même position que vous faites défiler la page.

Answer 6

Voici la solution simple et mieux travailler

Ajouter cette classe à votre page contextuelle modale.

body.modal-open { 
 
overflow: auto; 
 
}