danillouz/modal-slide-up.html

## modal-slide-up.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />

    <style>
      #container {
        background: #ddd;
        transition: transform 0.5s;
      }

      #container.overlay-open {
        transform: scale(0.8);
      }

      #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
      }

      #overlay.default {
        visibility: hidden;
        transform: translateY(100%);
        transition: transform 0.5s, visibility 0s 0.5s;
      }

      #overlay.open {
        visibility: visible;
        transform: translateY(0%);
        transition: transform 0.5s;
      }

      #close {
        border-radius: 50%;
        width: 3em;
        height: 3em;
        position: absolute;
        right: 2em;
        top: 2em;
        border: none;
        outline: none;
        z-index: 100;
        cursor: pointer;
      }

      .main {
        text-align: center;
        position: relative;
        top: 50%;
        height: 60%;
        transform: translateY(-50%);
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <section>
        <button id="show" type="button">
          show
        </button>
      </section>
    </div>

    <div id="overlay" class="default">
      <button id="close">
        X
      </button>

      <div class="main">
        <p>Hello!</p>
      </div>
    </div>

    <script>
      (function() {
        const container = document.getElementById('container');
        const overlay = document.getElementById('overlay');
        const show = document.getElementById('show');
        const close = document.getElementById('close');

        function toggleOverlay() {
          container.classList.toggle('overlay-open');
          overlay.classList.toggle('open');
        }

        show.addEventListener('click', toggleOverlay);
        close.addEventListener('click', toggleOverlay);
      })();
    </script>
  </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8" />

	<style>
	#container {
	background: #ddd;
	transition: transform 0.5s;
	}

	#container.overlay-open {
	transform: scale(0.8);
	}

	#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	}

	#overlay.default {
	visibility: hidden;
	transform: translateY(100%);
	transition: transform 0.5s, visibility 0s 0.5s;
	}

	#overlay.open {
	visibility: visible;
	transform: translateY(0%);
	transition: transform 0.5s;
	}

	#close {
	border-radius: 50%;
	width: 3em;
	height: 3em;
	position: absolute;
	right: 2em;
	top: 2em;
	border: none;
	outline: none;
	z-index: 100;
	cursor: pointer;
	}

	.main {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	transform: translateY(-50%);
	color: #fff;
	}
	</style>
	</head>

	<body>
	<div id="container">
	<section>
	<button id="show" type="button">
	show
	</button>
	</section>
	</div>

	<div id="overlay" class="default">
	<button id="close">
	X
	</button>

	<div class="main">
	<p>Hello!</p>
	</div>
	</div>

	<script>
	(function() {
	const container = document.getElementById('container');
	const overlay = document.getElementById('overlay');
	const show = document.getElementById('show');
	const close = document.getElementById('close');

	function toggleOverlay() {
	container.classList.toggle('overlay-open');
	overlay.classList.toggle('open');
	}

	show.addEventListener('click', toggleOverlay);
	close.addEventListener('click', toggleOverlay);
	})();
	</script>
	</body>
	</html>