Auf der HTML-Seite wird ein zentriertes und verschiebbares benutzerdefiniertes Fenster „layer

Auf der HTML-Seite wird ein zentriertes und verschiebbares benutzerdefiniertes Fenster „layer_jquery' angezeigt

WBOY

Freigeben： 2016-05-16 16:49:35

Original

1297 Leute haben es durchsucht

Das Prinzip der Verwendung von DIV-Popup-Fenstern zur dynamischen Anzeige von Inhalten: Verwenden Sie zunächst CSS und HTML, um den Inhalt im Popup-Fenster auszublenden, und verwenden Sie dann JavaScript (in diesem Tutorial JQuery), um ihn dynamisch anzuzeigen. Dieser Effekt kann nicht nur den begrenzten Layoutraum voll ausnutzen, sondern auch das Benutzererlebnis verbessern; was noch wichtiger ist, er hat keinen Einfluss auf den SEO-Effekt (da er tatsächlich auf der Seite vorhanden ist, aber zunächst unsichtbar ist)

1. Definieren Sie ein Div auf der HTML-Seite und implementieren Sie den Inhalt, den wir im Div anzeigen müssen.

Code kopieren Der Code lautet wie folgt:

< div id= "login">

Website-Login

Formular-ID = „loginForm“ >

=" user" class="text" />

Passwort:

Neuen Benutzer registrieren |.

Ein Bild sagt mehr als tausend Worte. Schauen wir uns den Screenshot dieses DIV-Popup-Fensters an:

2. Der von mir verwendete CSS-Stil
Auf der HTML-Seite wird ein zentriertes und verschiebbares benutzerdefiniertes Fenster „layer_jquery' angezeigt

Auf der HTML-Seite wird ein zentriertes und verschiebbares benutzerdefiniertes Fenster „layer_jquery' angezeigt

Code kopieren Der Code lautet wie folgt: #login { width:350px;

border:1px solid #ccc; 🎜>position:absolute;

z-index:9999; 
background:#fff;} 
height:40px; >line-height:40px ; 
font-size:14px; 
background:url(images /login_header.png) wiederholen Sie 
margin:0; 
border-bottom:1px solid #ccc; 
# login h2 img { 
float:right; 
top:14px; 
cursor:pointer; info { 
padding :10px 0 5px 0; 
text-align:center; 
color:maroon>} 
#login div.pass { 
 Schriftgröße:14px; 
padding:5px 0; 
text-align:center; 
#login input.text { 
width:200px ; 
Höhe: 25px; 
Hintergrund:#fff; 
#login .button { 
 text-align:center; 
padding:15px 0; 
#login input.submit { 
width:107px; 
background:url(images/ login_button.png) no-repeat; 
cursor:pointer; 
#login .other { 
text-align:right; 
padding:15px 10px ; 
Farbe: #666; 
} 

 
Da es in der Mitte angezeigt werden muss, verwenden wir die absolute Positionierung :absolute; Zweitens muss sich das Div am Ende befinden. Daher ist der Z-Index normalerweise sehr groß. Hier legen wir einen weiteren Punkt fest div selbst ist ausgeblendet und muss auf display:none eingestellt werden, aber hier müssen wir den Effekt direkt sehen, also lassen wir es direkt mit display:block anzeigen 

 3. Wir müssen es zur Anzeige zentrieren Daher müssen wir zuerst die Höhe und Breite des Browsers ermitteln. Wenn es einen horizontalen oder vertikalen Versatz der Bildlaufleiste gibt, müssen wir auch die Länge berechnen, um die Browserposition des Div zu erhalten. 




Code kopieren


 Der Code lautet wie folgt:

 
$(document).ready(function( ) 
{ 
jQuery.fn.extend({ 
center:function(width,height) 
{ 
return $(this).css("left", ($(window) .width( )-width)/2 $(window).scrollLeft() 
css("top", ($(window).height()-height)/2 $(window).scrollTop()). ). 
css("width",width); 
} 
}); >Durch Klicken auf die Schaltfläche wird Folgendes angezeigt: 




 Kopieren Sie den Code 

Der Code lautet wie folgt:

$(".login"). click(function ()

{ $("#login").show().center(350,250);//Anmeldefeld anzeigen}); >
Rendering
Auf der HTML-Seite wird ein zentriertes und verschiebbares benutzerdefiniertes Fenster „layer_jquery' angezeigt

Kann das Popup-Feld ziehen

Code-Implementierung

Code kopieren Der Code lautet wie folgt:

 
$(document).ready(function() 
{ 
jQuery.fn.extend({ 
/ /Drag and Drop-Funktion 
drag:function(){ 
var $tar = $(this); 
return $(this).mousedown(function(e){ 
if(e.target .tagName == "H2"){ 
var diffX = e.clientX - $tar.offset().left; 
var diffY = e.clientY - $tar.offset().top; $(document) .mousemove(function(e){ 
var left = e.clientX - diffX; 
var top = e.clientY - diffY; 
if (left < 0){ 
 left = 0; 
} 
else if (left <= $(window).scrollLeft()){ 
left = $(window).scrollLeft(} 
else if (left > ; $(window).width() $(window).scrollLeft() - $tar.width()){ 
left = $(window).width() $(window).scrollLeft( ) -$tar .width(); 
} 
if (top < 0){ 
top = 0; 
} 
else if (top <= $(window). scrollTop()) { 
top = $(window).scrollTop(); 
} 
else if (top > $(window).height() $(window).scrollTop() - $ tar.height( )){ 
top = $(window).height() $(window).scrollTop() - $tar.height(); 
$tar.css("left ",left ' px').css("top",top 'px'); 
}); 
} 
$(document).mouseup(function(){ 
$(this ).unbind( "mousemove"); 
$(this).unbind("mouseup") 
}); 

}); 

 
Hier konzentrieren wir uns nur auf das H2-Element im Div-Inhalt, das angeklickt und gezogen werden kann. Wenn das globale Div benötigt wird, kann es geändert werden Wird die Maus auf das angegebene Element gedrückt, werden die Koordinaten des Mauspunkts berechnet und das Bild an die entsprechende Position verschoben. Sobald der Mausklick abgebrochen wird, wird auch das entsprechende Druckereignis abgebrochen und die Seite bleibt statisch. 

Drag-Methode aufrufen

Kopieren Sie den Code

Der Code lautet wie folgt: $( "#login").drag(); Jetzt können wir auf die Titelleiste des Popup-Felds klicken und es nach Belieben in den Browser ziehen.