DOM Basic 1モードウィンドウ

8678 ワード
JavaScript DOM html CSS テキストリンク
DOMベースモデルウィンドウの作成

モデルウィンドウまたはポップアップウィンドウを作成する方法はいくつかありますが、ほとんどは同様の方法を使用します.
  • 通常モードウィンドウは、ユーザに完全な画面を提供する.
  • をクリックして、モードウィンドウを閉じます.
    • html
    <body>
  <button id="open">
    Modal Open
  </button>

  <div class="modal-container">
    <div class="modal">
      <h1>Modal</h1>
      <p>Lorem ipsum dolor.....</p>
    </div>
  </div>

  <script src="js/modal.js"></script>
</body>
    css
    .modal-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-container.show {
  display: flex;
}
    装飾ボタンとテキストのcssに加えて、display: noneからshowというクレームが追加された場合、displayプロパティを変更できることが重要です.
    js
    const open = document.querySelector('#open');
const modalContainer = document.querySelector('.modal-container');

const openModal = () => {
  modalContainer.classList.add('show');
}

const closeModal = (event) => {
  if(event.target === modalContainer) {
    modalContainer.classList.remove('show');
  }
}

open.addEventListener("click", openModal);
window.addEventListener("click", closeModal);
    多くの方法があるが、最も基本的な方法は、cssプリセットモードのopen/closeを使用し、対応するcssを追加/削除することである.
    余白をクリックするとモードウィンドウが閉じなければならないので、event.targetを使用して余白部分をクリックすると、表示モードのcssが削除されます.
    ファイルをWebコンポーネントに読み込みます
    影のためのCSSと最高のウェブサイトのための10の影