Comment créer une boîte modale réactive en utilisant HTML, CSS et jQuery

Comment créer une boîte modale réactive en utilisant HTML, CSS et jQuery

Dans la conception Web moderne, la boîte modale (Modal) est un élément interactif courant, qui peut être utilisé pour afficher du contenu supplémentaire, un formulaire ou des informations d'invite. La boîte modale peut apparaître après que l'utilisateur a cliqué sur un bouton ou un lien, couvrant la page actuelle et assombrissant le contenu d'arrière-plan pour attirer l'attention de l'utilisateur.

Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une boîte modale réactive, vous permettant d'utiliser de manière flexible cet élément interactif dans les pages Web et de garantir qu'il peut s'adapter aux tailles d'écran de différents appareils.

Structure HTML :
Regardons d'abord la structure HTML de la boîte modale :

<!-- 按钮或链接 -->
<button id="modalBtn">打开模态框</button>

<!-- 模态框 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>模态框标题</h2>
    <p>这是模态框的内容。</p>
  </div>
</div>

Dans cet exemple, nous utilisons un bouton pour déclencher l'affichage de la boîte modale. Le contenu de la boîte modale comprend un titre et un paragraphe.

Styles CSS :
Ensuite, nous ajoutons quelques styles CSS de base au modal et aux boutons.

/* 按钮样式 */
button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

/* 模态框样式 */
.modal {
  display: none; /* 初始隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 高于其他元素 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许滚动 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

/* 模态框内容样式 */
.modal-content {
  background-color: white;
  margin: 10% auto; /* 居中 */
  padding: 20px;
  width: 80%;
  max-width: 600px;
}

/* 关闭按钮样式 */
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

Script jQuery :
Enfin, nous utilisons jQuery pour écrire des scripts permettant de gérer l'affichage et le masquage de la boîte modale.

$(document).ready(function () {
  // 当点击按钮时显示模态框
  $("#modalBtn").click(function () {
    $("#modal").css("display", "block"); // 显示模态框
  });

  // 当点击关闭按钮或者模态框之外的区域时隐藏模态框
  $(".close, .modal").click(function () {
    $("#modal").css("display", "none"); // 隐藏模态框
  });

  // 防止点击模态框内容区域时隐藏模态框
  $(".modal-content").click(function () {
    return false;
  });
});

Dans ce script, nous utilisons l'événement click de jQuery pour implémenter la fonction d'affichage et de masquage de la boîte modale. Lorsque vous cliquez sur le bouton, le modal sera affiché. La boîte modale sera masquée lorsque vous cliquerez sur le bouton de fermeture ou sur la zone située à l'extérieur de la boîte modale.

Affichage des effets :
Maintenant, nous avons terminé la production d'une simple boîte modale réactive. Vous pouvez copier le code ci-dessus dans votre page Web, puis afficher la boîte modale sur la page Web.

Sur les appareils mobiles, le modal s'adapte automatiquement à la taille de l'écran et l'intégralité du contenu peut être visualisée en glissant. Sur le bureau, le modal est centré et le contenu d’arrière-plan est assombri.

Résumé :
En utilisant HTML, CSS et jQuery, nous pouvons facilement créer une boîte modale réactive. Cette box modale est polyvalente et peut s'adapter aux tailles d'écran de différents appareils pour offrir une bonne expérience utilisateur.

J'espère que cet article vous aidera à comprendre et à utiliser les boîtes modales. Si vous n'êtes pas familier avec HTML, CSS et jQuery, il est recommandé d'acquérir ces connaissances de base avant d'essayer de créer une boîte modale. Je vous souhaite du succès !

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!