Center a modal vertically with scroll for large content - html

Question

I have the following CSS and HTML for a Modal:
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
}
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png"/>
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
How to center the modal vertically, leaving a margin on top and bottom?
And when the content is to height the modal content should scroll and not the modal itself as it is now.

Answer 1

First Question:
How to center the modal vertically, leaving a margin on top and bottom?
The easiest way to do this would be to make a Flexbox out of the modal's parent. This way you can center the modal vertically and horizontally for sure.
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
display: flex; //Added this
justify-content: center; //Added this
align-items: center; //Added this
}
To leave a margin at the top and bottom you will have to set a max-height for your modal.
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px); //Added this so there will always be 20px free space on the top and bottom.
}
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
display: flex;
justify-content: center;
align-items: center;
}
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
But you can see a small problem. The text is overshooting at the bottom which leads us to your second question:
Second question:
And when the content is to height the modal content should scroll and not the modal itself as it is now.
To do this and to combat the problem described above let's add a scroll bar:
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px); //Added this so there will always be 20px free space on the top and bottom.
overflow-x: auto; //Added this to add the scroll bar
}
This is the final (working) result:
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
display: flex;
justify-content: center;
align-items: center;
}
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
overflow: auto;
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
Edit:
Actually you have some CSS attributes you don't need. I made a simple example of a modal.
.backdrop {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
overflow: auto;
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
The cleanest way I could think of is to also remove the overflow of the body. I also added some closing and opening mechanics:
function openmodal() {
document.querySelector("body").classList.toggle("overflow-hidden");
document.querySelector(".backdrop").style.display = "flex";
}
function closemodal() {
if (event.target == document.querySelector(".backdrop")) {
document.querySelector("body").classList.toggle("overflow-hidden");
document.querySelector(".backdrop").style.display = "none";
}
}
body {
overflow: auto;
}
.backdrop {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
<h1>Page main content</h1>
<button onclick="openmodal()">
Clik me
</button>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop" onclick="closemodal()">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>