Le principe de l'utilisation des pop-ups Div pour afficher le contenu dynamiquement: d'abord, utilisez CSS et HTML pour masquer le contenu dans les fenêtres contextuelles, puis utilisez JavaScript (jQuery dans ce didacticiel) pour les afficher dynamiquement. Cet effet utilise non seulement pleinement l'espace de mise en page limité, mais améliore également l'expérience utilisateur; Plus important encore, cela n'affecte pas l'effet SEO (car il existe réellement dans la page, mais est initialement invisible)
1. Définissez une div dans la page HTML et implémentez ce que nous devons afficher dans le div.
La copie de code est la suivante:
<body>
<div id = "login">
<h2> <img src = "images / close.png" /> Login du site Web </h2>
<form id = "loginform">
<div> </div>
<div> Compte: <input type = "text" name = "user" /> </div>
<div> Mot de passe: <entrée type = "mot de passe" name = "pass" /> </div>
<div> <input type = "Button" name = "sub" value = "" /> </div>
</ form>
<div> Enregistrer le nouvel utilisateur | Votre mot de passe oublié? </div>
</div>
</docy>
Une image vaut mille mots. Jetons un coup d'œil à la capture d'écran de l'effet de cette fenêtre pop-up DIV:
2. Le style CSS que j'utilise
La copie de code est la suivante:
#se connecter {
Largeur: 350px;
hauteur: 250px;
Border: 1px solide #ccc;
Position: absolue;
Affichage: bloc;
Z-Index: 9999;
Contexte: #FFF;
}
#login h2 {
hauteur: 40px;
hauteur de ligne: 40px;
Texte-aligne: Centre;
taille de police: 14px;
Espacement des lettres: 1px;
Couleur: # 666;
CONTEXTE: URL (images / login_header.png) repeat-x;
marge: 0;
rembourrage: 0;
Border-Bottom: 1px solide #ccc;
curseur: déplacer;
}
#login h2 img {
flottant: à droite;
Position: relative;
En haut: 14px;
À droite: 8px;
curseur: pointeur;
}
#login div.info {
rembourrage: 10px 0 5px 0;
Texte-aligne: Centre;
Couleur: Maroon;
}
#login div.user, #login div.pass {
taille de police: 14px;
Couleur: # 666;
rembourrage: 5px 0;
Texte-aligne: Centre;
}
#login input.text {
Largeur: 200px;
hauteur: 25px;
Border: 1px solide #ccc;
Contexte: #FFF;
taille de police: 14px;
}
#login .button {
Texte-aligne: Centre;
rembourrage: 15px 0;
}
#login input.submit {
Largeur: 107px;
hauteur: 30px;
Contexte: URL (images / login_button.png) sans répétition;
Border: aucun;
curseur: pointeur;
}
#login .other {
Texte-aligne: à droite;
rembourrage: 15px 10px;
Couleur: # 666;
}
La principale chose à noter ici est la définition du style DIV, car nous devons centrer l'affichage, nous utilisons la position de positionnement absolu: absolu; Deuxièmement, comme il s'agit d'une couche pop-up, la div doit être à la périphérie la plus externe, donc l'index z est généralement réglé sur très grand, nous le fixons ici sur Z-Index: 9999; Un autre point est que la div elle-même est cachée et doit être définie pour afficher: aucune, mais ici, nous devons regarder directement l'effet, afin que nous puissions l'afficher directement en utilisant l'affichage: Block;
3. Nous devons le laisser afficher dans un centre, nous devons donc d'abord obtenir la hauteur et la largeur du navigateur. S'il y a un décalage horizontal ou vertical de la barre de défilement, nous devons également obtenir la longueur et obtenir la position du div au navigateur par calcul.
La copie de code est la suivante:
$ (document) .ready (function ()
{
jQuery.fn.Extend ({
Centre: fonction (largeur, hauteur)
{
Retour $ (this) .css ("Left", ($ (fenêtre) .width () - width) / 2 + $ (window) .scrollleft ()).
css ("top", ($ (fenêtre) .Height () - hauteur) / 2 + $ (fenêtre) .scrollTop ()).
CSS ("largeur", largeur).
CSS ("hauteur", hauteur);
}
});
});
Laissez-le afficher en cliquant sur le bouton
La copie de code est la suivante:
$ (". Login"). Cliquez sur (fonction ()
{
$ ("# connexion"). Show (). Centre (350 250); // Afficher la boîte de connexion
});
Diagramme de reproduction
4. Peut faire glisser et déposer le cadre pop-up
Implémentation de code
La copie de code est la suivante:
$ (document) .ready (function ()
{
jQuery.fn.Extend ({
// Fonction de glisser-déposer
glisser: fonction () {
var $ tar = $ (this);
return $ (this) .mousedown (fonction (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientx - $ tar.offset (). Left;
var diffy = e.clienty - $ tar.offset (). top;
$ (document) .mousmove (fonction (e) {
var gauche = e.clientx - diffx;
var top = e.clienty - diffy;
if (gauche <0) {
gauche = 0;
}
else if (Left <= $ (window) .scrollleft ()) {
Left = $ (fenêtre) .scrollleft ();
}
else if (Left> $ (window) .width () + $ (window) .scrollleft () - $ tar.width ()) {
Left = $ (fenêtre) .Width () + $ (fenêtre) .scrolLft () - $ tar.width ();
}
if (top <0) {
en haut = 0;
}
else if (top <= $ (window) .scrolltop ()) {
top = $ (fenêtre) .scrollTop ();
}
else if (top> $ (fenêtre) .height () + $ (fenêtre) .scrolltop () - $ tar.height ()) {
top = $ (fenêtre) .height () + $ (fenêtre) .scrolltop () - $ tar.height ();
}
$ Tar.css ("Left", gauche + 'px'). CSS ("TOP", TOP + 'PX');
});
}
$ (document) .mouseup (function () {
$ (this) .unbind ("MouseMove");
$ (this) .unbind ("mouseup")
});
});
}
});
});
Ici, nous cliquez uniquement et faisant glisser les éléments H2 dans le contenu DIV. Si le div global est nécessaire, il peut être modifié. Le principe de traînée: lorsque la souris appuie sur l'élément spécifié, obtenez les coordonnées du point de la souris, et par calcul, l'image est également déplacée vers la position correspondante. Une fois que la souris clique pour annuler, l'événement de presse correspondant sera annulé et la page est toujours.
Appelez la méthode de drag
La copie de code est la suivante:
$ ("# connexion"). Drag ();
Maintenant, nous pouvons cliquer sur la barre de titre de la boîte contextuelle et la faire glisser dans le navigateur à volonté.