How to create a custom resizable modal with scrollable and fixed content

Use case

How the modal should be
  • fixed content (e.g. a title and a close button)
  • scrollable content (e.g. a long text)

Basic structure

  • modal-overlay is an optional div that is used to add a kind of background layer between the page content and the modal;
  • modal-container is the div used for displaying the modal.
Basic structure for developing a modal

The Overlay

Here modal-overlay is the semi-transparent black background that is ‘above’ the main-content of the page

The Modal

  • if the content exceeds the height of the modal and/or
  • if the browser window is resized?
When screen is resized and/or the modal content exceeds the height we have a bad behaviour
Overflow-y property applied to the modal
  1. all the modal content is scrollable, the close button too…
  2. you have the default scrollbar (that changes according to different OS)
Mmm, not so fancy
Default scrollbar generally sucks… And in this case it is hiding the modal rounded corner

The Solution

  • modal-container-content-no-scroll - the div dedicated for fixed content;
  • modal-container-content-scroll - the div dedicated for scrollable content.
Definitely better!
Congratulations! You are the Michelangelo of modals

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marco Rapaccini

Marco Rapaccini

Senior Software Engineer ~ Startup Technical Cofounder ~ R&D lover