Gwecode.
Feedback & overlays

Modal Dialog

An open button reveals a centered dialog over a dimmed overlay, closable by button, overlay click or the Escape key.

live preview 
<div class="modal-demo">
  <button class="modal-open">Open Dialog</button>
  <div class="modal-overlay">
    <div class="modal-box">
      <h3 class="modal-title">Delete this project?</h3>
      <p class="modal-text">This action cannot be undone. Your files and progress for this project will be permanently removed.</p>
      <div class="modal-actions">
        <button class="modal-cancel">Cancel</button>
        <button class="modal-confirm">Delete</button>
      </div>
    </div>
  </div>
</div>
.modal-demo {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}
.modal-open {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.modal-open:hover {
  background-color: #2f6fe0;
}
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay-show {
  display: flex;
}
.modal-box {
  box-sizing: border-box;
  width: 320px;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.25);
}
.modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.modal-text {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-cancel {
  background-color: transparent;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.modal-cancel:hover {
  background-color: #f3f4f6;
}
.modal-confirm {
  background-color: #dc2626;
  color: #ffffff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.modal-confirm:hover {
  background-color: #b91c1c;
}
var modalOpen = document.querySelector('.modal-open');
var modalOverlay = document.querySelector('.modal-overlay');
var modalCancel = document.querySelector('.modal-cancel');
var modalConfirm = document.querySelector('.modal-confirm');
function modalShow() {
  modalOverlay.classList.add('modal-overlay-show');
}
function modalHide() {
  modalOverlay.classList.remove('modal-overlay-show');
}
modalOpen.addEventListener('click', modalShow);
modalCancel.addEventListener('click', modalHide);
modalConfirm.addEventListener('click', modalHide);
modalOverlay.addEventListener('click', function (event) {
  if (event.target === modalOverlay) { modalHide(); }
});
document.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') { modalHide(); }
});