<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
<div class="wrapper">
      <button class="btn show-btn">Open Modal</button>
      
      <div class="modal hidden">
        <div class="modal-header">
          <h3>this is modal window</h3>
          <button class="close-btn">
            <i class="fas fa-close"></i>
          </button>
        </div>
        <div class="modal-body">
          <h3>Modal Title</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque
            ipsum veniam ducimus, aspernatur maxime quasi suscipit quos aperiam
            repudiandae sint corporis animi ullam placeat eos beatae doloribus
            debitis aliquam error.
          </p>
        </div>
      </div>
      <div class="overlay hidden"></div>
    </div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

body {
  font-family: 'Roboto Mono', sans-serif;
  height: 100vh;
  background: url("https://i.ebayimg.com/images/g/zV4AAOSwIMJkSA-e/s-l1200.webp");
  background-size: cover;
  /* linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), */
  background-position: center;
  background-repeat: no-repeat;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
}

.hidden {
  display: none;
}

.btn {
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.5rem;
  color: #f4f4f4;
  cursor: pointer;
}

.show-btn {
  background-color: #474b47;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.3s;
}

.show-btn:hover {
  background-color: #303130;
}

.show-btn:focus {
  border-color: red;
}

.modal {
  position: fixed;
  min-width: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f4f4f4;
  padding: 15px;
  border-radius: 8px;
  z-index: 10;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-body h3 {
  margin-bottom: 20px;
}

.modal-body p {
  line-height: 25px;
}

.close-btn {
  color: #222;
  padding: 5px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

const showBtn = document.querySelector('.show-btn'),
  hideBtn = document.querySelector('.close-btn'),
  overlay = document.querySelector('.overlay'),
  modal = document.querySelector('.modal');

showBtn.addEventListener('click', openModal);

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

hideBtn.addEventListener('click', closeModal);

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

overlay.addEventListener('click', closeModal);
window.addEventListener('keydown', (e) => {
  if (e.code === 'Escape') {
    closeModal();
  }
  if (e.code === 'KeyO') {
    openModal();
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.