複数のオープン／クローズハンドラによるVanilla JavaScriptモード

この記事では、バニラJavaScriptで簡単にモーダルを作成する方法を示します.これは、複数の開いている/閉じるハンドラをqueryselectorallのおかげですることができます.
まず第一に、我々のモーダルのためにHTML構造をつくってください.

<div class="modal">
  <span class="modal-backdrop"></span>
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title">Modal Title</h2><button class="close-modal">&times</button>
    </div>
    <div class="modal-body">
      <h3>Modal body</h3>
      <p>Modal body text</p>
    </div>
    <div class="modal-footer">
      <button class="close-modal">Ok</button>
      <button class="close-modal">Cancel</button>
    </div>
  </div>
</div>

今すぐいくつかのスタイルを追加できます.

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
  position: fixed;
  width: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
.modal .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: fixed;
}
.modal .modal-content {
  background: #fff;
  border-radius: 5px;
  max-width: 600px;
  position: fixed;
  top: -100%;
  transition: all 0.6s ease;
  z-index: 1000;
}
.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 1.5rem;
}
.modal .modal-header .close-modal {
  font-size: 2rem;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 30px;
  text-align: center;
}
.modal .modal-header .close-modal:hover {
  color: #000;
}
.modal .modal-body {
  padding: 1.5rem;
}
.modal .modal-footer {
  border-top: 1px solid #ccc;
  padding: 1rem;
  text-align: right;
}

注意してください.モーダルクラス.

.modal {
  ...
  top: 0;
  visibility: hidden;
  opacity: 0;
}

それはデフォルトでモードを隠しておきます、後で、我々は加えるためにJavaScriptを使用します.画面上に我々のモードが表示されるように見えるクラス.

JavaScriptへの時間
最後に、いくつかのJavaScriptコードを記述して、モーダルへの相互作用を与えます.
我々は、我々がDOMで対話する必要があるものを見つけることを始めます.

const modal = document.querySelector('.modal'),
      openHandlers = document.querySelectorAll('.open-modal'),
      closeHandlers = document.querySelectorAll('.close-modal');

今、私たちは開いて閉じているハンドラをループして、EventListenerをクリックします.

openHandlers.forEach(openHandler => {
  openHandler.addEventListener('click', openModal)
});

closeHandlers.forEach(closeHandler => {
  closeHandler.addEventListener('click', closeModal)
});

Clickイベントが解凍されると、開いて閉じた関数への呼び出しを追加しました.これら二つをつくってください.

function openModal() {
  modal.classList.add('visible');
}

function closeModal() {
  modal.classList.remove('visible');
}

OpenModel関数が解雇されると、単にクラスを追加します.メインに見える.モーダルクラス.
それで、我々はCSSでその可視性を切り替えることができます.

.modal.visible {
  opacity: 1;
  visibility: visible;
}
.modal.visible .modal-content {
  top: 25%;
}

注意top: 25%それはちょうど外にいくつかのクールなアニメーションを追加することです.
Thatsは我々が必要とします、そして、我々のモーダルは準備ができています.
バニラJavaScriptは非常に簡単ですが、過去には、このような単純なものを作るには、ロバの痛みになります.
アクションでそれを見るために、Codepenの上でdemoをチェックしてください.