JavaScript 超軽量モーダルサンプル

<div class="modalOuter">
  <div class="modal">
    <div class="modalClose">✖</div>
    <div class="modalInner">
      <p>Sample Modal</p>
      <p>Sample Modal</p>
      <p>Sample Modal</p>
      <p>Sample Modal</p>
      <p>Sample Modal</p>
    </div>
  </div>
  <div class="modalBg"></div>
</div>

*, *::before, *::after {
  box-sizing: border-box;
  word-break: break-all;
}

html, body {
  height: 100%;
}

p {
  margin-bottom: 10rem;
}

.modalOuter {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  height: 300px;
  border: 1px solid #000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  background: #fff;
}

.modalInner {
  overflow-y: scroll;
  height: inherit;
  padding: 1rem;
}

.modalBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.modalClose {
  display: grid;
  place-content: center;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

const buttons = document.querySelectorAll('.modalBtn')
const modalOuter = document.querySelector('.modalOuter')
const modal = document.querySelector('.modal')
const modalClose = document.querySelectorAll('.modalClose, .modalBg')

buttons.forEach(button => {
  button.addEventListener('click', () => {
    modalOuter.style.display = 'block'
    document.body.style.overflowY = 'hidden'
  })
})

modalClose.forEach(close => {
  close.addEventListener('click', () => {
    modalOuter.style.display = 'none'
    document.body.style.overflowY = ''
  })
})

元記事を表示する