web-dev-qa-db-fra.com

Comment faire défiler la page lorsqu'un dialogue modal est plus long que l'écran?

J'ai un dialogue modal dans mon application qui peut être assez long dans la direction y. Cela introduit un problème par lequel une partie du contenu de la boîte de dialogue est masquée au bas de la page.

enter image description here

Je voudrais que la barre de défilement de la fenêtre défile la boîte de dialogue quand elle est affichée et trop longue pour tenir à l'écran mais laisse le corps principal derrière le modal. Si vous utilisez Trello alors vous savez ce que je vais faire.

Est-ce possible sans utiliser JavaScript pour contrôler la barre de défilement?

Voici le CSS que j'ai appliqué à mon modal et à mon 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;
}
cssscroll
57
David Tuite

juste utiliser 

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

il va organiser votre modal et ensuite lui donner un défilement vertical 

122
Amit Kumar Pawar

C'est ce qui l'a corrigé pour moi:

max-height: 100%;
overflow-y: auto;

EDIT: J'utilise maintenant la méthode actuellement utilisée sur Twitter, où le modal agit comme une page distincte au-dessus du contenu actuel et le contenu derrière le modal ne bouge pas lorsque vous faites défiler.

En substance, c'est ceci:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

Avec ce CSS sur le modal:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Version JS pure (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Cela fonctionne quelles que soient la hauteur ou la largeur de la page ou de la boîte de dialogue modale, permet le défilement où que se trouve votre souris/doigt, ne comporte pas le saut saccadé. Certaines solutions permettent de désactiver le défilement du contenu principal et ont également une belle apparence.

30
0x0049

Changer position

position:fixed;
overflow: hidden;

à

position:absolute;
overflow:scroll;
12
bitoshi.n

Voici ma démonstration de la fenêtre modale qui se redimensionne automatiquement en fonction de son contenu et commence à défiler lorsqu'elle ne correspond pas à la fenêtre.

Démo de la fenêtre modale (voir les commentaires dans le code source HTML)

Tout se fait uniquement avec HTML et CSS - aucun JS requis pour afficher et redimensionner la fenêtre modale (mais vous en avez toujours besoin pour afficher la fenêtre bien sûr - dans la nouvelle version, vous n’avez pas du tout besoin de JS).

Mise à jour (plus de démos):

Le but est d’avoir des DIVs internes et externes, où la division externe définit la position fixe et la division interne crée le défilement. (Dans la démo, il y a en fait plus de DIV pour les faire ressembler à une fenêtre modale réelle.)}

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some Nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }
4
Radek Pech

Ici .. Fonctionne parfaitement pour moi

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}
2
Evans Kwachie

le positionnement fixe seul devrait avoir résolu le problème, mais une autre solution de contournement efficace pour éviter ce problème consiste à placer vos divs ou éléments modaux au bas de la page, et non dans la présentation de votre site. La plupart des plugins modaux donnent leur positionnement modal absolu pour permettre à l'utilisateur de continuer à faire défiler la page principale.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
2
Chimdi2000

position:fixed implique que, bien, la fenêtre modale restera fixe par rapport au point de vue. Je partage l’avis de votre opinion selon lequel cela convient dans ce scénario. Dans cet esprit, n’ajoutez-vous pas une barre de défilement à la fenêtre modale elle-même?

Si tel est le cas, les propriétés correctes max-height et overflow devraient suffire.

1
o.v.

c'est simple, vous pouvez le faire en ajoutant ce css Alors, vous venez de l'ajouter au CSS:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

et ça marche!

1
Ashiqur Rahman

Barre de défilement de page de fenêtre cliquable quand Modal est ouvert

Celui-ci fonctionne pour moi. CSS pur.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Essayez-le et laissez-moi savoir

0
Hiruyuki Xanada

En fin de compte, j'avais dû modifier le contenu de la page derrière l'écran modal afin de m'assurer qu'il ne soit jamais assez long pour faire défiler la page.

Une fois que j'ai fait cela, les problèmes rencontrés lors de l'application de position: absolute à la boîte de dialogue ont été résolus, l'utilisateur ne pouvant plus faire défiler la page.

0
David Tuite

Je voulais ajouter ma réponse CSS pure à ce problème de modaux à largeur et hauteur dynamiques. Le code suivant fonctionne également avec les exigences suivantes:

  1. Placer modal au centre de l'écran
  2. Si modal est supérieur à la fenêtre d'affichage, faites défiler le dimmer (pas de contenu modal)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS/LESS:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

De cette façon, le modal est toujours dans la fenêtre. La largeur et la hauteur du modal sont aussi flexibles que vous le souhaitez. J'ai enlevé mon icône proche de cela pour plus de simplicité.

0
karlludwigweise