JavaScript を使用してモーダルボックス機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用してモーダルボックス機能を実装するにはどうすればよいですか?

WBOY

リリース： 2023-10-20 16:46:00

オリジナル

1429 人が閲覧しました

如何使用 JavaScript 实现模态框功能？

JavaScript を使用してモーダルボックス機能を実装するにはどうすればよいですか?

Web 開発では、モーダルボックスは、プロンプト、確認ボックスをポップアップ表示したり、詳細なコンテンツを表示したりするために使用できる一般的な対話型コンポーネントです。この記事では、JavaScript を使用して単純なモーダルボックスを実装する方法と、具体的なコード例を紹介します。

1. HTML 構造
まず、モーダルボックスの構造を HTML に追加する必要があります。 div 要素をモーダルのコンテナとして使用し、タイトル、コンテンツ、ボタンなどの要素を div に追加できます。以下は簡単な HTML 構造の例です:

<div id="modal" class="modal">
  <div class="modal-content">
    <h3 class="modal-title">Modal Title</h3>
    <p class="modal-body">Modal Body</p>
    <button id="modal-close-btn" class="modal-close-btn">Close</button>
  </div>
</div>

ログイン後にコピー

2. CSS スタイル
モーダルボックスを通常どおり中央に表示できるようにするには、いくつかの CSS スタイルを追加する必要があります。以下は簡単なスタイルの例です:

.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  margin: 10% auto;
  padding: 20px;
  max-width: 400px;
  background-color: #fff;
}

.modal-title {
  margin: 0;
}

.modal-body {
  margin-top: 10px;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

ログイン後にコピー

3. JavaScript の実装
JavaScript を使用してモーダルボックスの機能を実装します。まず、モーダルボックスの要素を取得する必要があります:

var modal = document.getElementById("modal");
var closeButton = document.getElementById("modal-close-btn");

ログイン後にコピー

次に、イベントリスナーを追加して、閉じるボタンがクリックされたときにモーダルボックスが非表示になるようにします:

closeButton.addEventListener("click", function() {
  modal.style.display = "none";
});

ログイン後にコピー

次に、モーダルボックスを表示する関数を定義できます。

function showModal(title, body) {
  var modalTitle = document.querySelector(".modal-title");
  var modalBody = document.querySelector(".modal-body");

  modalTitle.innerText = title;
  modalBody.innerText = body;

  modal.style.display = "block";
}

ログイン後にコピー

モーダルボックスを表示する必要がある場合、showModal 関数を呼び出して、タイトルとコンテンツのパラメーターを渡すだけです。例:

showModal("提示", "这是一个模态框示例。");

ログイン後にコピー

4. 完全なコード例
上記は、単純なモーダルボックス関数実装の例です。以下は、完全な HTML、CSS、JavaScript コード例です:

<!DOCTYPE html>
<html>
<head>
  <title>Modal Example</title>
  <style>
    /* CSS 样式 */
    /* ... */
  </style>
</head>
<body>
  <button onclick="showModal('提示', '这是一个模态框示例。')">显示模态框</button>

  <div id="modal" class="modal">
    <div class="modal-content">
      <h3 class="modal-title">Modal Title</h3>
      <p class="modal-body">Modal Body</p>
      <button id="modal-close-btn" class="modal-close-btn">Close</button>
    </div>
  </div>

  <script>
    // JavaScript 实现
    // ... 
  </script>
</body>
</html>

ログイン後にコピー

Pass 上記の手順により、JavaScript を使用して単純なモーダルボックス関数を実装できます。ボタンをクリックすると、アニメーション効果付きのモーダルボックスがポップアップし、指定したタイトルとコンテンツが表示されます。モーダルは、閉じるボタンまたはモーダル背景の外側の領域をクリックすると非表示になります。ニーズに応じて、モーダルボックスのスタイルと動作をカスタマイズおよび拡張できます。

以上がJavaScript を使用してモーダルボックス機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。