El principio del uso de ventanas emergentes DIV para mostrar el contenido dinámicamente: primero, use CSS y HTML para ocultar el contenido en las ventanas emergentes, y luego use JavaScript (jQuery en este tutorial) para mostrarlos dinámicamente. Este efecto no solo hace uso completo del espacio de diseño limitado, sino que también mejora la experiencia del usuario; Más importante aún, no afecta el efecto SEO (porque en realidad existe en la página, pero inicialmente es invisible)
1. Defina un DIV en la página HTML e implementa lo que necesitamos mostrar en el DIV.
La copia del código es la siguiente:
<Body>
<div id = "Login">
<h2> <img src = "images/close.png"/> sitio web inicio de sesión </h2>
<Form ID = "Loginform">
<div> </div>
<div> cuenta: <input type = "text" name = "user" /> </div>
<Div> Password: <input type = "contraseña" name = "pass" /> </div>
<Div> <input type = "button" name = "sub" value = "" /> </div>
</form>
<Div> Registro nuevo usuario | ¿Olvidaste tu contraseña? </div>
</div>
</body>
Una imagen vale más que mil palabras. Echemos un vistazo a la captura de pantalla del efecto de esta ventana emergente Div:
2. El estilo CSS que uso
La copia del código es la siguiente:
#acceso {
Ancho: 350px;
Altura: 250px;
borde: 1px sólido #ccc;
Posición: Absoluto;
Pantalla: bloque;
Index Z: 9999;
Antecedentes: #fff;
}
#login h2 {
Altura: 40px;
Línea de altura: 40px;
Text-Align: Center;
tamaño de fuente: 14px;
Espaciado de letras: 1px;
Color:#666;
fondo: url (imágenes/login_header.png) repetir-x;
margen: 0;
relleno: 0;
Border-Bottom: 1px Solid #CCC;
cursor: mover;
}
#login h2 img {
flotante: correcto;
Posición: relativo;
arriba: 14px;
Derecha: 8px;
cursor: puntero;
}
#login div.info {
relleno: 10px 0 5px 0;
Text-Align: Center;
Color: granate;
}
#login div.user, #login div.pass {
tamaño de fuente: 14px;
Color:#666;
relleno: 5px 0;
Text-Align: Center;
}
#login input.text {
Ancho: 200px;
Altura: 25px;
borde: 1px sólido #ccc;
Antecedentes: #fff;
tamaño de fuente: 14px;
}
#login .button {
Text-Align: Center;
relleno: 15px 0;
}
#login input.submit {
Ancho: 107px;
Altura: 30px;
fondo: url (imágenes/login_button.png) No-repeat;
borde: ninguno;
cursor: puntero;
}
#login .Other {
Text-Align: Right;
relleno: 15px 10px;
Color:#666;
}
Lo principal a tener en cuenta aquí es la definición del estilo DIV, porque necesitamos centrar la pantalla, utilizamos la posición de posicionamiento absoluto: Absoluto; En segundo lugar, debido a que es una capa emergente, el DIV debe estar en la periferia más externa, por lo que el índice Z generalmente se establece en muy grande, aquí lo establecemos en el índice Z: 9999; Otro punto es que el DIV en sí está oculto y debe configurarse para mostrar: ninguno, pero aquí necesitamos mirar directamente el efecto, para que podamos mostrarlo directamente usando la pantalla: Bloque;
3. Necesitamos dejar que se muestre en un centro, por lo que primero debemos obtener la altura y el ancho del navegador. Si hay un desplazamiento horizontal o vertical de la barra de desplazamiento, también necesitamos obtener la longitud y obtener la posición del DIV al navegador a través del cálculo.
La copia del código es la siguiente:
$ (documento) .Ready (function ()
{
jquery.fn.extend ({
Centro: función (ancho, altura)
{
devolver $ (this) .css ("izquierda", ($ (ventana) .width ()-ancho)/2+$ (ventana) .scrollleft ()).
CSS ("Top", ($ (ventana) .Height ()-altura)/2+$ (ventana) .scrolltop ()).
CSS ("Ancho", ancho).
CSS ("altura", altura);
}
});
});
Déjelo mostrar haciendo clic en el botón
La copia del código es la siguiente:
$ (". Login"). Click (function ()
{
$ ("#login"). show (). Center (350,250); // Mostrar el cuadro de inicio de sesión
});
Diagrama de reproducción
4. Puede arrastrar y soltar el marco emergente
Implementación del código
La copia del código es la siguiente:
$ (documento) .Ready (function ()
{
jquery.fn.extend ({
// Función de arrastrar y soltar
arrastrar: function () {
var $ tar = $ (esto);
devolver $ (this) .mouseDown (función (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientx - $ tar.offset (). izquierda;
var diffy = e.clienty - $ tar.offset (). top;
$ (documento) .MouseMove (función (e) {
var izquierda = e.clientx - diffx;
var top = e.clienty - diffy;
if (izquierda <0) {
izquierda = 0;
}
else if (izquierda <= $ (ventana) .scrollleft ()) {
izquierda = $ (ventana) .scrollleft ();
}
else if (izquierda> $ (ventana) .width () +$ (ventana) .scrollleft () - $ tar.width ()) {
izquierda = $ (ventana) .width () +$ (ventana) .scrollleft () -$ tar.width ();
}
if (top <0) {
superior = 0;
}
else if (top <= $ (ventana) .scrolltop ()) {
top = $ (ventana) .scrolltop ();
}
else if (top> $ (ventana) .Height () +$ (ventana) .scrolltop () - $ tar.height ()) {
top = $ (ventana) .Height () +$ (ventana) .scrolltop () - $ tar.height ();
}
$ tar.css ("izquierda", izquierda + 'px'). css ("top", top + 'px');
});
}
$ (documento) .MouseUp (function () {
$ (esto) .unbind ("mouseMove");
$ (esto) .unbind ("mouseup")
});
});
}
});
});
Aquí solo hacemos clic y arrastramos los elementos H2 en el contenido DIV. Si se necesita el DIV global, se puede modificar. El principio de arrastre: cuando el mouse presiona el elemento especificado, obtenga las coordenadas del punto del mouse y, a través del cálculo, la imagen también se mueve a la posición correspondiente. Una vez que el mouse hace clic para cancelar, el evento de prensa correspondiente se cancelará y la página está quieta.
Llamar al método de arrastre
La copia del código es la siguiente:
$ ("#Login"). Drag ();
Ahora podemos hacer clic en la barra de título del cuadro emergente y arrastrarla al navegador a voluntad.