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.

Comment faire défiler la page lorsqu'une boîte de dialogue modale est plus long qu'à l'écran?

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...
InformationsquelleAutor David Tuite | 2012-05-07