Das Prinzip der Verwendung von Div-Pop-ups zum dynamischen Anzeigen von Inhalten: Verwenden Sie zuerst CSS und HTML, um den Inhalt in den Popups auszublenden und dann JavaScript (JQuery in diesem Tutorial) zu verwenden, um sie dynamisch anzuzeigen. Dieser Effekt nutzt nicht nur den begrenzten Layoutraum voll, sondern verbessert auch die Benutzererfahrung. Noch wichtiger ist, dass es den SEO -Effekt nicht beeinflusst (weil es tatsächlich auf der Seite existiert, sondern ursprünglich unsichtbar ist)
1. Definieren Sie eine DIV auf der HTML -Seite und implementieren Sie das, was wir im Div anzeigen müssen.
Die Codekopie lautet wie folgt:
<body>
<div id = "login">
<H2> <img src = "bilder/close.png"/> Website Login </H2>
<form id = "loginForm">
<div> </div>
<Div> Konto: <Eingabe type = "text" name = "user" /> < /div>
<Div> Passwort: <Eingabe type = "Passwort" name = "Pass" /> < /div>
<div> <Eingabe type = "button" name = "sub" value = "" /> < /div>
</form>
<Div> Neuen Benutzer registrieren | Ihr Passwort vergessen? </div>
</div>
</body>
Ein Bild ist mehr als tausend Worte. Schauen wir uns den Screenshot des Effekts dieses Div-Popup-Fensters an:
2. Der CSS -Stil, den ich benutze
Die Codekopie lautet wie folgt:
#login {
Breite: 350px;
Höhe: 250px;
Grenze: 1PX Solid #CCC;
Position: absolut;
Anzeige: Block;
Z-Index: 9999;
Hintergrund: #fff;
}
#login H2 {
Höhe: 40px;
Zeilenhöhe: 40px;
Text-Align: Mitte;
Schriftgröße: 14px;
Buchstabenabteilung: 1PX;
Farbe:#666;
Hintergrund: URL (Bilder/login_Header.png) Repeat-X;
Rand: 0;
Polsterung: 0;
Border-Bottom: 1PX Solid #CCC;
Cursor: Bewegung;
}
#login H2 img {
float: rechts;
Position: Relativ;
Top: 14px;
Rechts: 8px;
Cursor: Zeiger;
}
#login div.info {
Polsterung: 10px 0 5px 0;
Text-Align: Mitte;
Farbe: Kastanienbraun;
}
#login div.user, #login div.pass {
Schriftgröße: 14px;
Farbe:#666;
Polsterung: 5px 0;
Text-Align: Mitte;
}
#login input.text {
Breite: 200px;
Höhe: 25px;
Grenze: 1PX Solid #CCC;
Hintergrund: #fff;
Schriftgröße: 14px;
}
#login .button {
Text-Align: Mitte;
Polsterung: 15px 0;
}
#login input.submit {
Breite: 107px;
Höhe: 30px;
Hintergrund: URL (Bilder/login_button.png) No-Repeat;
Grenze: Keine;
Cursor: Zeiger;
}
#login .Other {
Text-Align: Recht;
Polsterung: 15px 10px;
Farbe:#666;
}
Die Hauptsache, die hier zu beachten ist, ist die Definition des Div -Stils, da wir die Anzeige des Zentrums verwenden müssen, verwenden wir die absolute Positionierungsposition: Absolute; Zweitens, da es sich um eine Popup-Schicht handelt, muss sich das DIV an der äußersten Peripherie befinden, sodass der Z-Index normalerweise auf sehr groß eingestellt ist. Hier setzen wir es auf Z-Index: 9999; Ein weiterer Punkt ist, dass die DIV selbst versteckt ist und so eingestellt werden muss, dass sie angezeigt werden: Keine, aber hier müssen wir den Effekt direkt untersuchen, damit wir sie direkt mit Anzeige: Block anzeigen können.
3. Wir müssen es in einem Zentrum angezeigt werden, damit wir zuerst die Höhe und Breite des Browsers erhalten müssen. Wenn ein horizontaler oder vertikaler Versatz der Bildlaufleiste vorliegt, müssen wir auch die Länge erhalten und die Position des DIV durch Berechnung zum Browser erhalten.
Die Codekopie lautet wie folgt:
$ (Dokument) .Ready (Funktion ()
{
jQuery.fn.extend ({{
Mitte: Funktion (Breite, Höhe)
{
Return $ (this) .css ("links", ($ (Fenster) .Width ()-Breite)/2+$ (Fenster) .Scrollleft ()).
CSS ("Top", ($ (Fenster) .Height ()-Höhe)/2+$ (Fenster) .Scrolltop ()).
CSS ("Breite", Breite).
CSS ("Höhe", Höhe);
}
});
});
Lassen Sie es anzeigen, indem Sie auf die Schaltfläche klicken
Die Codekopie lautet wie folgt:
$ (". Login"). Click (function ()
{
$ ("#Login"). Show (). Center (350.250); // Zeigen Sie das Anmeldefeld an
});
Reproduktionsdiagramm
4. kann den Popup-Rahmen ziehen und fallen lassen
Code -Implementierung
Die Codekopie lautet wie folgt:
$ (Dokument) .Ready (Funktion ()
{
jQuery.fn.extend ({{
// Drag & Drop -Funktion
Drag: function () {
var $ tar = $ (this);
$ $ (this) .MouseDown (Funktion (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientx - $ tar.offset ().
var diffy = e.clienty - $ tar.offset (). Top;
$ (Dokument) .Mousemove (Funktion (e) {
var links = e.clientx - Diffx;
var top = e.clienty - diffy;
if (links <0) {
links = 0;
}
else if (links <= $ (Fenster) .ScrollLeft ()) {
links = $ (Fenster) .Scrollleft ();
}
sonst if (links> $ (Fenster) .Width () +$ (Fenster) .Scrollleft () - $ tar.width ()) {
links = $ (Fenster) .Width () +$ (Fenster) .ScrollLeft () -$ tar.width ();
}
if (top <0) {
Top = 0;
}
sonst if (top <= $ (Fenster) .Scrolltop ()) {
Top = $ (Fenster) .Scrolltop ();
}
else wenn (oberst.
Top = $ (Fenster) .Height () +$ (Fenster) .Scrolltop () - $ tar.height ();
}
$ tar.css ("links", links + 'px'). CSS ("Top", Top + 'PX');
});
}
$ (Dokument) .MouSeup (function () {
$ (this) .unbind ("Mousemove");
$ (this) .unbind ("mauseup")
});
});
}
});
});
Hier klicken und ziehen wir nur die H2 -Elemente im Div -Inhalt. Wenn die globale DIV benötigt wird, kann sie geändert werden. Das Drag -Prinzip: Wenn die Maus auf das angegebene Element drückt, erhalten Sie die Koordinaten des Mauspunkts und durch Berechnung wird das Bild auch in die entsprechende Position verschoben. Sobald die Maus auf Abbrechen klickt, wird das entsprechende Presseereignis storniert und die Seite ist immer noch.
Rufen Sie die Drag -Methode auf
Die Codekopie lautet wie folgt:
$ ("#login"). Drag ();
Jetzt können wir auf die Titelleiste des Popup-Box klicken und nach Belieben in den Browser ziehen.