CSS grid layout - overlay

by Alex

HTML

<div class="container">
  <div class="site-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta voluptatum sint commodi, dignissimos nulla minus harum qui fugiat aperiam iste quis incidunt, repudiandae illo quaerat nobis, deleniti molestiae quo numquam.
    <div class="overlay-toggle">open overlay</div>
  </div>
  <div class="container__overlay-background"></div>
  <div class="container__overlay">
    Et quas libero, exercitationem, ipsum, possimus fugiat dolor ut quae maxime, quaerat velit reiciendis sint iste odio voluptas amet molestias officia saepe.
    <div class="overlay-toggle">close overlay</div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: arial;
}

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 10vw auto auto 10vw;
  grid-template-rows: 2fr 4fr 2fr;
  height: 100vh;  
}

.site-content {
  grid-column: 2 / 3;
  grid-row: 2 / 2;
  padding: 15px;
  z-index: 0;
}

.container__overlay, .container__overlay-background {
  display: none;
}

.container__overlay-background {
  display: none;
}

.overlay-visible .container__overlay-background {
  display: block;
  grid-column: 1 / 5;
  grid-row: 1 / 4;
  background-color: rgba(0,0,0,.2);
  z-index: 10;
}
.overlay-visible .container__overlay {
  display: block;
  grid-column: 2 / 3;
  grid-row: 2 / 2;
  background-color: #333;
  color: #fff;
  padding: 15px;
  z-index: 20;
}

.overlay-toggle {
  margin-top: 8px;
  cursor: pointer;
  padding: 6px;
  background: #fff;
  color: #000;
  text-align: center;
}

Babel + JSX

let $overlayToggle = $('.overlay-toggle');
let $container = $('.container');

$overlayToggle.on('click', () => {
	$container.toggleClass('overlay-visible');
});