bootstrap javascript fermer la boîte modale

Dans le développement Web, la boîte modale est un élément d'interface couramment utilisé. Elle peut être utilisée pour afficher des informations rapides, remplir des formulaires, etc. Bootstrap est un framework frontal largement utilisé qui fournit de nombreux composants pratiques, notamment des boîtes modales. Le code JavaScript utilisé avec la boîte modale peut contrôler l'affichage, le masquage, la fermeture et d'autres comportements de la boîte modale. Cet article explique comment utiliser le code JavaScript Bootstrap pour fermer la boîte modale.

Méthodes pour fermer la boîte modale

Bootstrap propose plusieurs façons de fermer la boîte modale :

• Cliquez sur le bouton de fermeture dans la boîte modale ;
• Cliquez en dehors de la boîte modale ;
• Appelez l'API dans la méthode JavaScript ;

Ici, nous nous concentrons sur la troisième méthode, qui consiste à fermer la boîte modale via du code JavaScript.

Utilisez la méthode API pour fermer la boîte modale

La boîte modale Bootstrap fournit une méthode modal, qui prend en charge plusieurs opérations, telles que l'ouverture, la fermeture, la commutation, etc. Parmi eux, la méthode pour fermer la boîte modale est hide. L'utilisation spécifique est la suivante : modal，它支持多种操作，如打开、关闭、切换等。在其中，关闭模态框的方法为hide，具体用法如下：

$('#myModal').modal('hide');

其中'#myModal'是模态框的id，如果你使用的是自定义样式，也可以替换成其他选择器。

例如，代码如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是一个简单的模态框结构，其中包括一个关闭按钮。下面我们就来看看如何使用JavaScript代码关闭它。

首先，我们需要获取模态框的jQuery对象：

const myModal = $('#myModal');

然后，可以把一个关闭模态框的方法封装成一个函数：

function hideModal() {
  myModal.modal('hide');
}

在需要关闭模态框的地方，只需要调用这个函数即可：

hideModal();

总结

本文介绍了Bootstrap JavaScript代码如何关闭模态框。通过modalrrreee

où '#myModal' est l'identifiant de la boîte modale. Si vous utilisez des styles personnalisés, vous pouvez également les remplacer par d'autres sélecteurs. 🎜🎜Par exemple, le code est le suivant : 🎜rrreee🎜Il s'agit d'une structure modale simple qui comprend un bouton de fermeture. Voyons comment le désactiver à l'aide du code JavaScript. 🎜🎜Tout d'abord, nous devons obtenir l'objet jQuery de la boîte modale : 🎜rrreee🎜 Ensuite, nous pouvons encapsuler une méthode de fermeture de la boîte modale dans une fonction : 🎜rrreee🎜 Partout où la boîte modale doit être fermée, appelez simplement ceci function Ça y est : 🎜rrreee🎜 Résumé 🎜🎜 Cet article explique comment fermer la boîte modale avec le code JavaScript Bootstrap. Grâce à la méthode modal, nous pouvons contrôler dynamiquement l'affichage, le masquage, la commutation et d'autres comportements de la boîte modale dans le code JavaScript, ce qui est très pratique. Dans le processus de développement ultérieur, nous pouvons utiliser ces méthodes de manière appropriée pour optimiser l'expérience utilisateur en fonction des besoins réels. 🎜

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!