Comment créer des popups simples avec jQuery ?

Création de fenêtres contextuelles simples avec jQuery

De nombreuses applications Web nécessitent la possibilité d'afficher des informations supplémentaires ou d'autoriser la saisie de l'utilisateur sans quitter la page actuelle. Une solution courante consiste à utiliser une fenêtre contextuelle. Dans cet article, nous allons explorer comment créer une popup simple à l'aide de jQuery.

Personnalisation de l'apparence

Pour personnaliser l'apparence de la popup, ajustez le CSS suivant :

a.selected {
couleur de fond :#1F75CC;
couleur:blanc;
z-index:100;
}

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

étiquette {
affichage : bloc ;
margin-bottom : 3px;
padding-left : 15px;
text-indent : -15px;
}

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

Implémentation de jQuery

Ensuite, implémentez le code jQuery :

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('clic', fonction() {

deselect($('#contact'));
return false;

});
});

$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacité : ' basculer', hauteur : 'basculer' }, 'rapide', assouplissement, callback);
};

Structure HTML

Enfin, ajoutez la structure HTML pour afficher la popup :

< ;formulaire method="post">

<p><label for="email">Your email or name</label><input type="text" size="30" name="email">

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!