JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<button id="btn">Modal</button>
<main>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis...

SCSS

html,body {
	font-family: sans-serif;
  touch-action: none;
		overscroll-behavior: none;
		-webkit-overflow-scrolling: auto;
}
/* html {
  &[data-modal-active="true"] {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}

body {
  [data-modal-active="true"] & {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}
 */aside {
	position: absolute;
	z-index: 100;
	background-color: #777;
	top: 50%;
	left: 50%;
	overflow: auto;
	max-height: 80vh;
	transform: translate(-50%, -50%);
	display: none;
	flex-direction: column;
	[data-modal-active="true"] & {
		display: flex;
	}
}

JavaScript

var btn = document.getElementById("btn");

btn.addEventListener("click", e => {
	document.documentElement.setAttribute("data-modal-active",
		document.documentElement.getAttribute("data-modal-active") === "true" ? "false" : "true")
});