First Step

Simple Modal(source: Nomad Coder)

단순한 모달창을 만드는 예제입니다. 모달창은 웹페이지에 자주 사용되는 기능입니다.

html: index.html

<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>Modal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button class="open">Open Modal</button>
    <div class='modal hidden'>
      <div class="modal__overlay"></div>
      <div class="modal__content">
        <h1>This is Modal</h1>
        <button>종료</button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

css: style.css

body {
  font-family: sans-serif;
}
button {
  all: unset;
  background-color: aquamarine;
  color: black;
  padding: 5px 20x;
  border-radius: 5px;
}
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
}
.modal__content {
  background-color: white;
  padding: 50px 100px;
  position: relative;
  text-align: center;
  top: 0px;
  border-radius: 10px;
  width: 10%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
h1 {
  margin: 0;
}
.hidden {
  display: none;
}

javascript: index.js

var openButtoon = document.querySelector('.open');
var modal = document.querySelector('.modal');
var overlay = modal.querySelector('.modal__overlay');
var closeButton = modal.querySelector('button');

function openModal() {
  modal.classList.remove('hidden');
}
function closeModal() {
  modal.classList.add('hidden');
}

overlay.addEventListener('click', closeModal);
closeButton.addEventListener('click', closeModal);
openButtoon.addEventListener('click', openModal);