Comment créer une fenêtre pop-up jquery-Questions et réponses frontales-php.cn

Comment créer une fenêtre pop-up jquery

王林

Libérer： 2023-05-25 13:03:08

original

1093 Les gens l'ont consulté

<p>jQuery est une bibliothèque JavaScript rapide et concise qui simplifie la traversée et la manipulation de documents HTML, la gestion des événements, la conception d'animations et l'interaction Ajax. Dans le développement Web, les fenêtres contextuelles constituent une méthode d'interaction courante. Cet article explique comment utiliser jQuery pour créer des fenêtres contextuelles.

<p>Tout d'abord, nous devons introduire le lien CDN de la bibliothèque jQuery dans le fichier HTML :

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

Copier après la connexion

<p>Ensuite, nous créons une partie HTML contenant le contenu du pop-up :

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Hello World!</p>
  </div>
</div>

Copier après la connexion

<p>Ici, <div>< /code> L'élément spécifie un conteneur de fenêtre contextuelle avec l'ID <code>myModal et le nom de classe modal ; l'élément <div> contient un autre nom de classe Le conteneur de modal-content est utilisé pour afficher le contenu de la fenêtre pop-up ; l'élément <span> spécifie une icône de fourchette avec un nom de classe. de close , utilisé pour fermer la fenêtre pop-up ; l'élément <p> contient le contenu textuel que nous voulons afficher dans la fenêtre pop-up. <div>元素指定了一个ID为myModal和类名为modal的弹窗容器；<div>元素中包含另一个类名为modal-content的容器，用于显示弹窗的内容；<span>元素指定了一个类名为close的叉子图标，用于关闭弹窗；<p>元素包含了我们想要在弹窗中显示的文本内容。

<p>接下来，我们需要编写JavaScript代码来实现弹窗：

// 获取弹窗元素
var modal = document.getElementById('myModal');

// 获取叉子图标元素
var closeBtn = document.getElementsByClassName('close')[0];

// 当叉子图标被点击时，关闭弹窗
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// 当用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// 当按钮被点击时，显示弹窗
$('#myButton').click(function() {
  modal.style.display = "block";
});

Copier après la connexion

<p>这里，我们首先获取了弹窗元素和叉子图标元素。然后，在叉子图标被点击时，我们使用onclick事件来将弹窗的显示属性设置为none，从而关闭弹窗。接下来，我们使用window对象的onlick事件来监听用户在窗口中的其他部分的点击事件，以便在用户单击弹窗以外的区域时关闭弹窗。

<p>最后，我们监听按钮的点击事件，并在单击时使用jQuery将弹窗的显示属性设置为block，从而显示弹窗。这里我们使用了jQuery的click()

Ensuite, nous devons écrire du code JavaScript pour implémenter la fenêtre pop-up : <p>rrreee

Ici, nous obtenons d'abord l'élément de fenêtre pop-up et l'élément d'icône de fourche. Ensuite, lorsque l'on clique sur l'icône fork, nous utilisons l'événement onclick pour définir la propriété d'affichage de la fenêtre pop-up sur none, fermant ainsi la fenêtre pop-up. Ensuite, nous utilisons l'événement onlick de l'objet window pour écouter les événements de clic de l'utilisateur dans d'autres parties de la fenêtre afin que la fenêtre contextuelle puisse être fermée lorsque l'utilisateur clique à l'extérieur. la fenêtre contextuelle. <p>

Enfin, nous écoutons l'événement click du bouton et utilisons jQuery pour définir l'attribut d'affichage de la fenêtre pop-up sur block lorsque vous cliquez dessus pour afficher la fenêtre pop-up. Ici, nous utilisons la méthode click() de jQuery pour enregistrer les événements de clic. <p>

En utilisant le code ci-dessus, nous avons maintenant créé un exemple de base de popup jQuery. Dans les projets réels, vous pouvez personnaliser les fenêtres contextuelles via des styles et du code JavaScript pour répondre à différents besoins. 🎜🎜Résumé : 🎜🎜jQuery est une bibliothèque JavaScript populaire qui peut être utilisée pour simplifier la traversée et la manipulation de documents HTML, la gestion des événements, la conception d'animations et l'interaction Ajax. Vous pouvez facilement créer des fenêtres contextuelles à l'aide de jQuery et personnaliser le style et les fonctionnalités de la fenêtre contextuelle selon vos besoins. Dans les projets réels, vous pouvez utiliser jQuery pour obtenir une expérience d'interaction utilisateur plus avancée. 🎜

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!