1. Subformación
Al diseñar un sitio web, necesitamos diseñar algunas subformas modales, como
Este paso es fácil de implementar, solo Div+CSS está bien, consulte el código:
La copia del código es la siguiente:
<div> </div>
<div>
<div>
<Centente> Haga clic en el área de bloque puede cambiar mi posición </Center>
</div>
</div>
La copia del código es la siguiente:
.modal-background
{
Color de fondo: #999999;
Abajo: 0;
Izquierda: 0;
Opacidad: 0.3;
Posición: fijo;
Derecha: 0;
arriba: 0;
Índice Z: 1100;
}
.
{
Color de fondo: #fffff;
Border: 1px Solid #6B94AD;
Shadow de caja: 5px 5px 5px #6b94ad;
Font-Family: 'Microsoft Yahei';
tamaño de fuente: 12px;
Altura: 120px;
Izquierda: 50%;
margen -izquierda: -160px;
margen -top: -160px;
Opacidad: 1;
Posición: fijo;
arriba: 50%;
Ancho: 320px;
Índice Z: 1110;
}
.
{
Altura: 25px;
Color: #ffff;
Font-peso: 600;
IMAGEN DE ANTECEDENTES: -MOZ-LINEAR-gradiente (arriba, #4A8CC5, #2963A5);
IMAGEN DE FINTA: -CeBKit-Gradient (lineal, superior izquierda, fondo izquierdo, color-parada (0, #4A8CC5), color-stop (1, #2963A5));
Filtro: progid: dximagetransform.microsoft.gradient (startColorStr = '#4a8cc5', endcolorstr = '#2963a5', gradiente = '0'); :::::::::::::::::: para:: ::::::::::::::::::::::::::::::::
}
. Centro de cabecera.
{
Top-top: 2px;
}
Agregar el HTML y CSS anterior puede lograr fácilmente el efecto de la forma modal anterior. Donde la izquierda: 50%; Top: 50%;
Por supuesto, el tamaño de la forma modal está escrito en la clase de estilo.
La copia del código es la siguiente:
<div> </div>
<div>
<div>
<Centente> Haga clic en el área de bloque puede cambiar mi posición </Center>
</div>
</div>
La segunda línea de código se adjunta a la clase de estilo .list-ventana de ventana para anular el tamaño y la posición en la clase .modal-ventana de ventana, pero también asegura que la forma modal esté centrada y mostrada.
La copia del código es la siguiente:
.
{
Ancho: 600px;
Altura: 400px;
margen-izquierda: -300px;
margen-top: -200px;
}
Como se muestra
Se puede ver que la implementación de este paso es muy simple.
2. Cuando el mouse hace clic en el cabezal de la subformación, ¿cómo arrastrar y mover la subformación? Después de introducir JQ, solo necesitamos algunos scripts para resolver esta pequeña función. Si no lo crees, veamos
La copia del código es la siguiente:
var izquierda, arriba, $ this;
$ (documento) .Delegate ('. Modal-Window .head', 'MouseDown', function (e) {
izquierda = e.clientx, top = e.clienty, $ this = $ (this) .css ('cursor', 'mover');
this.setCapture?
this.setCapture (),
this.onmouseMove = function (ev) {mouseMove (ev || evento);
this.onmouseUp = mouseUp
): $ (documento) .bind ("mouseMove", mouseMove) .bind ("mouseup", mouseup);
});
función mouseMove (e) {
var Target = $ this.Parents ('. Modal-Window');
var l = Math.max ((e.clientx -izquierda + número (target.css ('margin -left'). reemplazar (/px $/, '')) || 0), -target.position (). izquierda);
var t = Math.max ((e.clienty -top + number (target.css ('margin -top'). reemplazar (/px $/, '')) || 0), -target.position (). arriba);
l = Math.min (l, $ (ventana) .Width () - Target.Width () - Target.Position (). Left);
t = Math.min (t, $ (ventana) .Height () - Target.height () - Target.Position (). Top);
izquierda = e.clientx;
superior = e.clienty;
Target.css ({'margin-izquierda': l, 'margen-top': t});
}
function mouseup (e) {
var el = $ this.css ('cursor', 'predeterminado'). get (0);
El.releaseCapture?
(
El.ReleaseCapture (),
El.onmouseMove = el.onmouseup = nulo
): $ (documento) .unbind ("mouseMove", mouseMove) .unbind ("mouseup", mouseup);
}
Este código es muy corto y puede funcionar sin problemas en varios navegadores.
De hecho, su principio de implementación es muy simple y se divide aproximadamente en tres pasos:
① Cuando el mouse está debajo de MouseDown en la cabeza de la forma modal, ata inmediatamente a los eventos de mouseMove y Mouseup al documento.
② Cuando el mouse no aparece (sin ratón), si el mouse se mueve en la forma, active la función del mouseMove y mueva la posición de toda la forma a tiempo calculando la distancia que se mueve el mouse.
③ Cuando el mouse se rebota (mouseup), llame al evento de mouseup para desabrochar el evento MouseMove y el evento de mouseup atado en el documento.
El principio de todo el proceso es: cuando el mouseDown mouse se mueve hacia abajo, el evento de movimiento del mouse se transfiere al documento, y todo el formulario se procesa a través del evento de movimiento del mouse en el documento.
Además, hay un pequeño truco en MouseMove, que es la izquierda global. ¿Qué tan lejos se ha movido el mouse?
Después del análisis de este código, se descubrió que el mouse mueve el formulario o cualquier elemento en el documento es bastante fácil.
Por ejemplo, si desea cambiar el tamaño del formulario arrastrando y dejando caer, solo necesitamos ajustar el tamaño del formulario en la función de manejo de eventos MouseMove y estará bien. ¿Mejoró de nuevo?
Algunas personas pueden preguntar qué hacen SetCapture y RelaseCapture respectivamente. De hecho, esto es para la compatibilidad de IE. SetCapture permite que el elemento actual capture todos los eventos del mouse.