Comment faire défiler la page lorsqu'une boîte de dialogue modale est plus long qu'à l'écran?
J'ai une boîte de dialogue modale dans mon application qui peut être assez longue dans la direction y. Cela introduit un problème selon lequel une partie du contenu de la boîte de dialogue est caché au bas de la page.
Je voudrais la fenêtre de la barre de défilement pour faire défiler la boîte de dialogue lorsqu'il est affiché et trop long pour tenir sur l'écran, mais de laisser le corps principal en place derrière le modal. Si vous utilisez Trello alors vous savez ce que je vais faire.
Est-ce possible sans l'aide de JavaScript pour contrôler la barre de défilement?
Voici le CSS que j'ai appliqué à mon modal et de la boîte de dialogue jusqu'à présent:
body.blocked {
overflow: hidden;
}
.modal-screen {
background: #717174;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.9;
z-index: 50;
}
.dialog {
background: #fff;
position: fixed;
padding: 12px;
top: 20%;
left: 50%;
z-index: 10000;
border-radius: 5px;
box-shadow: 0, 0, 8px, #111;
}
- essayez overflow:auto ou overflow:scroll dans la boîte de dialogue...
Vous devez vous connecter pour publier un commentaire.
suffit d'utiliser
il se chargera de votre modal et puis de lui donner un défilement vertical
C'est ce qu'il fixe pour moi:
MODIFIER: je vais maintenant utiliser la même méthode actuellement utilisée sur Twitter où le modal agit un peu comme une page séparée sur le dessus de l'actuel contenu et le contenu derrière le modal ne bouge pas lorsque vous faites défiler.
En essence, c'est ceci:
Avec ce CSS sur le modal:
JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS version (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/
Ce fonctionne peu importe la hauteur ou la largeur de la page ou de la boîte de dialogue modale, permet de faire défiler n'importe où de votre souris ou le doigt est, ne pas avoir l'effet de sauter certaines solutions ont que désactiver le défilement sur le contenu principal, et ressemble beaucoup trop.
Changement
position
à
position: fixed;
Pourrait-il être le changement dans l'absolu ou autre?Voici ma version de démonstration de la fenêtre modale qui redimensionnement automatique de son contenu et commence à défiler quand il n'a pas la taille de la fenêtre.
Fenêtre modale démo (voir les commentaires dans le code source HTML)
Fait uniquement avec du HTML et CSS - pas de JS requis pour l'affichage et le redimensionnement de la fenêtre modale
(mais vous avez encore besoin d'elle pour l'affichage de la fenêtre de cours- dans la nouvelle version, vous n'avez pas besoin de JS à tous).Mise à jour (plus de démos):
Fenêtre modale aligné en haut
Centré fenêtre Modale
Vieille démo que l'utilisation de Javascript
Le point est d'avoir intérieure et extérieure des DIVs où l'extérieur, ce qui définit la position fixe et de l'intérieur crée le défilement. (Dans la démo il y a plus de DIVs pour les faire ressembler à une véritable fenêtre modale.)
overflow:hidden
et les paramètres de sa taille pour le même que celui de la page et sonmargin-top
négatif de sonscroll-top
.html,body{ overflow:hidden }
?html,body{ overflow:hidden }
peut ne pas fonctionner comme prévu. Ainsi, il peut ressembler à un overkill, mais mieux vaut prévenir que guérir.correction du positionnement seuls devraient avoir résolu le problème, mais une autre bonne solution pour éviter ce problème est de placer votre modal divs ou les éléments en bas de la page, pas dans vos sites de mise en page. La plupart modal plugins donner leur modal positionnement absolu pour permettre à l'utilisateur de garder la page principale de défilement.
Ici.. Fonctionne parfaitement pour moi
manière simple, vous pouvez le faire en ajoutant cette css
Donc, vous venez d'ajouter ce CSS:
et il du travail!
position:fixed
implique que, eh bien, la fenêtre modale reste fixe par rapport au point de vue. Je suis d'accord avec votre évaluation qu'il convient dans ce scénario, avec cela à l'esprit, pourquoi ne vous y ajouter une barre de défilement de la fenêtre modale lui-même?Si oui, corrigez
max-height
etoverflow
propriétés devrait faire l'affaire.À la fin, j'avais du faire des changements au contenu de la page derrière l'écran modal pour s'assurer qu'il ne faisait jamais assez longtemps pour faire défiler la page.
Une fois que je l'ai fait, les problèmes que j'ai rencontrés lors de l'application de
position: absolute
à la boîte de dialogue ont été résolus en tant que l'utilisateur ne pouvait plus faire défiler vers le bas de la page.Fenêtre de Page de la barre de Défilement cliquable lorsque Modal est ouvert
Celui-ci fonctionne pour moi. Pur CSS.
Essayez-le et laissez-moi savoir
Je voulais ajouter mon pur CSS réponse à ce problème de modals avec dynamique de la largeur et de la hauteur. Le code suivant fonctionne également avec les exigences suivantes:
HTML:
CSS/LESS:
De cette façon, le modal est toujours dans la fenêtre d'affichage. La largeur et la hauteur de la modales sont aussi flexibles que vous le souhaitez. J'ai enlevé mon icône de fermeture de ce pour des raisons de simplicité.