Modal & Popovers

A scrollable modal is the right pattern whenever the body content is simply too long to fit the viewport in one comfortable view. Instead of stretching the dialog past the edges of the screen, the body region scrolls on its own while the header and footer stay anchored in place. That keeps the title and the primary action buttons within easy reach no matter how far the reader has travelled down the page of text in front of them. Use this layout for terms and conditions, release notes, onboarding guides, or any reference material a visitor needs to read in full before deciding how to proceed. Because only the inner region moves, the surrounding chrome never jumps, and the close icon remains exactly where the eye expects to find it from the very first moment the dialog opens on screen. The backdrop behind the modal stays fixed and gently dimmed throughout the interaction, reinforcing that the dialog is the single point of focus until it is dismissed. Focus is trapped inside the modal for keyboard users, so pressing tab cycles only through the controls that belong to the dialog itself, rather than wandering off into the page that sits hidden quietly behind it during reading. Long passages of copy like this one show clearly how the scroll container behaves under real content rather than a single short sentence. The text flows in natural, well-spaced paragraphs that stay comfortable to read, and the scrollbar appears only when it is genuinely needed, so shorter messages still render perfectly cleanly without any unnecessary visual clutter around their edges. When the reader reaches the footer they can save their choice or dismiss the dialog, and closing it returns focus to the button that first opened the modal. The page underneath is restored exactly as it was, making the scrollable modal a dependable way to present detailed information without ever pulling the visitor away from the page they came from.