Comment créer une simple fenêtre contextuelle jQuery avec une zone de texte d'e-mail étiquetée ?

Création d'une fenêtre contextuelle simple avec jQuery

Lors de la conception de pages Web, vous pouvez rencontrer des situations dans lesquelles vous souhaitez afficher des informations ou du contenu supplémentaires dans un fenêtre contextuelle séparée lors d'une action utilisateur spécifique. Cet article vous guidera tout au long du processus de création d'une fenêtre contextuelle simple à l'aide de jQuery, en se concentrant sur l'affichage d'une zone de texte d'e-mail étiquetée.

Étape 1 : Style CSS

Tout d'abord, définir les styles CSS pour personnaliser l'apparence du popup.

a.selected {
  background-color: #1F75CC;
  color: white;
  z-index: 100;
}

.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  cursor: default;
  display: none;
  margin-top: 15px;
  position: absolute;
  text-align: left;
  width: 394px;
  z-index: 50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

Ce CSS définit les styles pour l'élément popup, l'élément lié qui déclenche le popup, étiquettes et éléments de paragraphe dans la popup.

Étape 2 : Fonctionnalité JavaScript

Ensuite, créez les fonctions JavaScript pour gérer le comportement de la popup :

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

• deselect() : Cette fonction ferme la fenêtre contextuelle et supprime l'état sélectionné du lien element.
• $('#contact').on('click', ...) : ce gestionnaire d'événements bascule la visibilité de la fenêtre contextuelle lorsque l'on clique sur l'élément avec l'ID de 'contact'.
• $('.close').on('click', ...) : Ce gestionnaire d'événements ferme la fenêtre contextuelle lorsque l'élément 'close' est cliqué.
• $.fn.slideFadeToggle : Cette fonction personnalisée s'estompe et bascule en douceur la visibilité de la fenêtre contextuelle.

Étape 3 : Structure HTML

Enfin, définissez la structure HTML de la popup et du lien element :

<div class="messagepop pop">
  <form method="post">

Ce code HTML définit le contenu de la fenêtre contextuelle, y compris un formulaire avec une entrée d'e-mail et une zone de texte de message, ainsi que l'élément lié avec un identifiant de « contact ».

En combinant ces étapes, vous pouvez créer une fenêtre contextuelle simple qui apparaît lorsque vous cliquez sur le lien « Contactez-nous » et contient une zone de texte d'e-mail étiquetée. Cette technique peut être facilement personnalisée et adaptée pour répondre à vos besoins spécifiques.

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!