Skip to content

Instantly share code, notes, and snippets.

@dkvz

dkvz/modal.html

Last active August 8, 2019 12:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dkvz/5d3592b2653f76c7ae517b39136953f6 to your computer and use it in GitHub Desktop.
Save dkvz/5d3592b2653f76c7ae517b39136953f6 to your computer and use it in GitHub Desktop.
Download ZIP
Modal + Overlay based on pseudo element and quick JS to open and close
Raw
modal.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Expérience CSS Overlay & Modal</title>
</head>
<style>
html, body {
min-height: 100%;
}
body {
font-family: sans-serif;
color: #333;
padding: 0;
margin: 0;
}
body[data-overlay]:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
/*
Fallback:
*/
background-color: #000;
background-color: rgba(0,0,0,0.5);
}
body[data-overlay] {
overflow: hidden;
}
.modal {
position: absolute;
width: 100%;
z-index: 11;
top: 5%;
/*
Adding a quick animation:
*/
animation: modal-anim 0.2s ease-out;
}
.modal-content {
background-color: #333;
color: #edebed;
padding: 1rem;
width: 220px;
margin-left: auto;
margin-right: auto;
/*
This is just to center the example text:
*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.d-none {
display: none;
}
main {
padding: 2rem;
}
@keyframes modal-anim {
0% {
top: -10%;
opacity: 0;
}
100% {
top: 5%;
opacity: 1;
}
}
</style>
<body>
<div class="modal d-none">
<div class="modal-content">
<h1>Coucou!</h1>
<button type="button" id="closeBtn">Fermer</button>
</div>
</div>
<main>
<h1>Page de test</h1>
<p><button type="button" id="openBtn">Ouvrir le Modal</button></p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea minima quisquam enim repellat vero velit facilis asperiores commodi illo et, modi nemo quod libero distinctio dicta sequi. Ut itaque molestias ratione perferendis molestiae ullam. Fugiat quod quis velit necessitatibus minima soluta, nesciunt at beatae saepe tempore voluptate doloremque officia eligendi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias amet debitis dolor ex soluta voluptatem modi. Officia, labore.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, quod?</p>
</main>
<script>
const modal = document.querySelector('.modal');
document.getElementById('openBtn').addEventListener('click', () => {
document.body.setAttribute('data-overlay', true);
scrollTo(0, 0);
modal.classList.remove('d-none');
});
document.getElementById('closeBtn').addEventListener('click', () => {
document.body.removeAttribute('data-overlay');
modal.classList.add('d-none');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment