Comment utiliser JavaScript pour implémenter la fonctionnalité de boîte modale ?-js tutoriel-php.cn

Comment utiliser JavaScript pour implémenter la fonctionnalité de boîte modale ?

WBOY

Libérer： 2023-10-20 16:46:00

original

1412 Les gens l'ont consulté

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

Comment utiliser JavaScript pour implémenter la fonction de boîte modale ?

Dans le développement Web, les boîtes modales sont un composant interactif courant qui peut être utilisé pour afficher des invites, des boîtes de confirmation ou afficher du contenu détaillé. Cet article explique comment utiliser JavaScript pour implémenter une simple boîte modale et donne des exemples de code spécifiques.

1. Structure HTML
Tout d'abord, nous devons ajouter la structure de la boîte modale au HTML. Vous pouvez utiliser un élément div comme conteneur pour le modal et ajouter des éléments tels que le titre, le contenu et les boutons dans le div. Voici un exemple simple de structure 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>

Copier après la connexion

2. Styles CSS
Pour que la boîte modale s'affiche et se centre normalement, nous devons ajouter des styles CSS. Ce qui suit est un exemple de style simple :

.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;
}

Copier après la connexion

3. Implémentation de JavaScript
Nous utilisons JavaScript pour implémenter la fonction de la boîte modale. Tout d'abord, nous devons récupérer les éléments du modal :

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

Copier après la connexion

Ensuite, nous ajoutons un écouteur d'événement pour masquer le modal lorsque l'on clique sur le bouton de fermeture :

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

Copier après la connexion

Ensuite, nous pouvons définir une fonction pour afficher le modal :

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";
}

Copier après la connexion

Là où nous devons afficher la boîte modale, il suffit d'appeler la fonction showModal et de transmettre les paramètres de titre et de contenu. Par exemple :

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

Copier après la connexion

IV. Exemple de code complet
Ce qui précède est un exemple d'implémentation simple d'une fonction de boîte modale. Ce qui suit est un exemple complet de code HTML, CSS et 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>

Copier après la connexion

Grâce aux étapes ci-dessus, nous pouvons utiliser JavaScript. pour implémenter une fonctionnalité de boîte modale simple. Lorsque vous cliquez sur le bouton, la boîte modale apparaîtra avec un effet d'animation et affichera le titre et le contenu spécifiés. Le modal sera masqué en cliquant sur le bouton de fermeture ou sur une zone en dehors de l'arrière-plan modal. Vous pouvez personnaliser et étendre le style et le comportement de la boîte modale en fonction de vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!