A fullscreen modal with fixed header, footer and a scrollable content

In this short post, I would like to demonstrate how to create a full sized modal view with fixed header and footer and scrollable content section.

TL;DR here's the result of this demo
https://www.abrickis.me/labs/modals

The wireframe of modal view

Lately here at Mintos we had to redesign the filters section for our loans’ marketplace. We did it by implementing a sidebar targeting large screens, similarly as it’s done on many e-commerce sites.

And for mobile devices with less space on the screen, we decide to go with the modal view containing the filter form and actions.

By examination the options of implementation of such a feature, we found a very simple solution which works on any browser. Either it’s an older version of IE or a more recent mobile browser such as Safari on iOS or Android’s web browser.

Let’s take a look at the code

First of all here is all the markup one needs. Containing an container element of modal and three child element for its header, content, and footer.

<div class="modal">
    <div class="modal__header"></div>
    <div class="modal__content"></div>
    <div class="modal__footer"></div>
</div>