<button type="button" class="btn-modal">모달창 띄우기</button>

  <div class="modal">
    
    <div class="modal-layer"></div>
    <div class="modal-wrap">
      
      <div class="modal-header">
        <h2>Modal Title</h2>
        <button class="btn-close">닫기</button>
      </div>

      <div class="modal-body">
        <p>
          Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you 
        </p>
      </div>
    </div>

  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  background-color: #fff;
  border: none;
  outline: none;
}

.btn-modal {
  width: 250px;
  height: 50px;
  background-color: blue;

  color: #fff;
  font-size: 14px;
}

.modal {
  position: fixed;
  visibility: hidden; 
  /* visibility: hidden;은 영역을 차지하고 눈에 보이지 않음 
    display: none;은 영역도 함께 사라짐 */

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /*background-color: #000;*/

  opacity: 0;

  z-index: 9999;

  transition: all 0.5s;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

.modal .modal-layer {
  position: absolute;

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.modal .modal-wrap {
  position: absolute;

  width: 500px;
  background-color: #fff;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal .modal-wrap .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px 40px;
}

.modal .modal-wrap .modal-header h2 {
  font-size: 20px;
}

.modal .modal-wrap .modal-header .btn-close {
  cursor: pointer;
  font-size: 15px;
  background-color: blue;
  color: #fff;
}

.modal .modal-wrap .modal-body {
  padding: 20px;

  font-size: 16px;
}

var btnModal = document.querySelector('.btn-modal');
var modal = document.querySelector('.modal');
var btnClose = document.querySelector('.modal .btn-close');

btnModal.addEventListener('click', function() {
  modal.classList.add('active');
})

btnClose.addEventListener('click', function() {
  modal.classList.remove('active');
})

modal.addEventListener('click', function(e) {
  var target = e.target;
  var isLayer = target.classList.contains('modal-layer');

  if(isLayer) {
    modal.classList.remove('active');
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.