fermeture modale javascript

JavaScript Modal Close

Modal est une fenêtre contextuelle de page Web courante, généralement utilisée pour afficher du contenu, demander une confirmation ou collecter des informations. Créer un modal en JavaScript est une opération courante, mais fermer le modal n'est peut-être pas si simple. Cet article présentera plusieurs méthodes courantes pour fermer le modal JavaScript.

1. Utilisation de jQuery

Si vous utilisez jQuery, la fermeture du modal peut être réalisée des manières suivantes :

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

Utilisez modal("show") pour afficher le modal, utilisez modal("hide") pour fermer le modal. Parmi eux, #myModal est votre sélecteur modal et doit être modifié en fonction de votre situation réelle. modal("show") 来显示 modal，使用 modal("hide") 来关闭 modal。其中，#myModal 是你 modal 的选择器，需要根据你的实际情况进行更改。

2. 使用 Bootstrap 的方法

如果你使用了 Bootstrap ，可以使用以下的方式来关闭 modal：

$(document).ready(function() {
  // 显示 modal
  $("#myModal").modal("show");

  // 关闭 modal
  $("#myModal").modal("hide");
});

和 jQuery 方法类似，使用 modal("show") 来显示 modal，使用 modal("hide") 来关闭 modal。同样，#myModal 是你 modal 的选择器，需要根据你的实际情况进行更改。

3. 使用原生 JavaScript 的方法

如果你不想使用 jQuery 或者 Bootstrap ，可以使用原生 JavaScript 来关闭 modal。这种方法需要用到 getElementById 方法来获取 modal 元素，使用 style.display 来设置其 display 属性为 none。

以下是一个示例代码：

// 显示 modal
document.getElementById("myModal").style.display = "block";

// 关闭 modal
document.getElementById("myModal").style.display = "none";

使用 style.display = "block" 来显示 modal，使用 style.display = "none" 来关闭 modal。同样，myModal 是你 modal 的 id，需要根据你的实际情况进行更改。

4. 在 modal 中添加关闭按钮

在 modal 中添加关闭按钮可以提供更好的用户体验，同时也可以方便用户关闭 modal，下面是一个示例代码：

<!-- 在 modal 中添加关闭按钮 -->
<div class="modal-header">
  <h5 class="modal-title">Modal 标题</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

可以看到，在 modal 的头部中添加了一个关闭按钮，其中 data-dismiss="modal" 属性是必须的，它指示按钮要关闭 modal。用户单击关闭按钮会触发 hide.bs.modal 事件，可以通过以下方式来捕获该事件：

$('#myModal').on('hide.bs.modal', function (e) {
  // do something...
})

关闭 modal 可以使用 modal("hide") 或 style.display = "none"

Utilisation de la méthode Bootstrap

Si vous utilisez Bootstrap, vous pouvez utiliser la méthode suivante pour désactiver modal :

rrreee🎜Similaire à la méthode jQuery, utilisez modal("show" ) pour afficher le modal, utilisez modal("hide") pour fermer le modal. De même, #myModal est le sélecteur de votre modal et doit être modifié en fonction de votre situation réelle. 🎜
🎜Utilisez la méthode JavaScript native🎜🎜🎜Si vous ne souhaitez pas utiliser jQuery ou Bootstrap, vous pouvez utiliser JavaScript natif pour désactiver le modal. Cette méthode nécessite d'utiliser la méthode getElementById pour obtenir l'élément modal et d'utiliser style.display pour définir son attribut display sur none<.>code>. 🎜🎜Ce qui suit est un exemple de code : 🎜rrreee🎜Utilisez style.display = "block" pour afficher le modal, utilisez style.display = "none" pour fermer le modal. De même, myModal est le id de votre modal, qui doit être modifié en fonction de votre situation réelle. 🎜
🎜Ajouter un bouton de fermeture dans le modal🎜🎜🎜L'ajout d'un bouton de fermeture dans le modal peut offrir une meilleure expérience utilisateur et également permettre aux utilisateurs de fermer plus facilement le modal. Voici un exemple de code. : 🎜rrreee🎜 Comme vous pouvez le voir, un bouton de fermeture est ajouté à l'en-tête du modal, où l'attribut data-dismiss="modal" est requis, qui demande au bouton de fermer le modal. Lorsque l'utilisateur clique sur le bouton de fermeture, l'événement hide.bs.modal sera déclenché. Cet événement peut être capturé des manières suivantes : 🎜rrreee🎜Pour fermer le modal, vous pouvez utiliser . modal("hide") ou style.display = "none", celui que vous choisissez dépend de votre implémentation. 🎜🎜Résumé🎜🎜Il existe de nombreuses façons de fermer un modal en JavaScript, comme en utilisant jQuery, Bootstrap ou JavaScript natif, et un bouton de fermeture peut être ajouté au modal pour offrir une meilleure expérience utilisateur. La méthode à utiliser dépend de votre mise en œuvre et des circonstances. Quelle que soit la méthode que vous choisissez, vous devez vous assurer que le modal peut être fermé avec succès, sinon cela pourrait affecter l'expérience utilisateur. 🎜

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!