Continúe con la implementación simple de JavaScript de la ventana de arrastre emergente (i) para aprender.
El siguiente es el análisis específico del código:
Primero, confirmemos la estructura:
Ventana flotante: inicialmente invisible. Incluye la barra de título y la barra de contenido, con barras de título y botones de cierre dentro de la barra de título.
Capa de máscara: invisible al principio. Se usa para establecer el fondo translúcido cuando aparece la ventana flotante.
Botón: se usa para hacer clic para aparecer en la ventana flotante.
Lo siguiente explicará en detalle
1. Para permitir que la ventana se mueva libremente, la posición de la ventana debe ser absoluta;
/*Componente de capa flotante de inicio de sesión*/. PopUp {Display: None; /*Ocultación inicial*/ ancho: 380px; Altura: Auto; /*Alta libertad, porque es incierto, cuánto contenido es. */ borde: 1px sólido #d5d5d5; Antecedentes: #ffff; /*El contenido de la ventana es opaco, el fondo es blanco*/ box-shadow: 0 0 3px rgba (0, 0, 0, 0.25); -Moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0.25); /*La ventana de contenido está sombreada*/ border-radius: 8px; /* Todas las esquinas usan esquinas redondeadas con un radio de 8px, esta propiedad es una propiedad estándar CSS3*/ -MOZ-Border-Radius: 8px; /* Atributos privados del navegador Mozilla*/ -Webkit-Border-Radius: 8px; /* Atributos privados del navegador WebKit*//* Ventana redondeadas*/ posición: absoluto; arriba: 100px; Izquierda: 100px; /*Posicionamiento absoluto*/ Z-índice: 9000; }2. Agregue una barra de título a la ventana y configure el cursor del mouse de la barra de título en la forma de arrastrar (mover) (al arrastrar en Chrome, el cursor se convertirá en un cursor de texto y se restaurará después de liberar el botón del mouse). Aquí debe establecer una esquina redondeada para la parte superior izquierda y las esquinas superiores a la derecha de la barra de título.
/*Área de la barra de título*/. PopUp_title {altura: 48px; Línea de altura: 48px; /*Centro verticalmente*/ Padding: 0px 20px; /*Haga una cierta distancia desde la izquierda*/ fondo: #f5f5f5; /*Color de fondo*/ Border-Bottom: 1px Solid #efefefef; /*Border inferior*/ Border-Radius: 8px 8px 0 0; /* Use esquinas redondeadas con radio de 5px en la parte superior izquierda y las esquinas de la parte superior derecha. Esta propiedad es una propiedad estándar CSS3*/ -MOZ-Border-Radius: 8px 8px 0 0; /* Propiedad privada del navegador Mozilla*/ -Webkit-Border-Radius: 8px 8px 0 0; /* Propiedades privadas del navegador WebKit*//* Ventana redondeadas*/ Color: #535353; tamaño de fuente: 16px; /* Color de fuente y tamaño de fuente*/ cursor: mover; /* Estilo móvil*/ -MOZ-USER-SELECT: NINGUNO; / * Firefox all */ -webkit-user-select: ninguno; /* Chrome All / Safari All / Opera15+* / -Ms-User-Select: Ninguno; /* Ie10*/ -khtml-user-select: ninguno; /* Navegadores tempranos*/ user-select: ninguno; -o-user-select: ninguno; /* Los dos atributos anteriores no son compatibles actualmente, por lo que los escribí aquí para reducir los riesgos*/}Aquí hay algunos puntos de conocimiento para entender:
1. CONCRITAS DEL BORDE CSS3 (BORDE-RADIUS)
Border-Radius es un método de abreviatura. Además, los cuatro valores se establecen en el orden de la parte superior izquierda, la parte superior derecha, la parte inferior derecha, la parte inferior izquierda y la parte inferior izquierda. Las situaciones principales ocurrirán en las siguientes situaciones:
1. Si solo hay un valor, entonces los cuatro valores de la parte superior izquierda, superior derecha, inferior derecha e inferior izquierda son iguales.
2. Hay dos valores, entonces la parte superior izquierda es igual a la derecha inferior, y se toma el primer valor; La derecha superior es igual a la parte inferior izquierda, y se toma el segundo valor
3. Hay tres valores, el primer valor es establecer la parte superior izquierda; Mientras que el segundo valor es de primera derecha e inferior a la izquierda y serán iguales, y el tercer valor es establecer la derecha inferior.
4. Hay cuatro valores, el primer valor es establecer la parte superior izquierda y el segundo valor es superior, el tercer valor inferior derecha, y el cuarto valor es establecer la parte inferior izquierda.
Navegadores compatibles:
2. Cursor: Mover
La propiedad del cursor especifica el tipo de puntero (cursor) que se muestra.
Cuando el valor de la propiedad se mueve, significa que el objeto mencionado por este cursor es móvil, generalmente una flecha transversal, como se muestra en la figura.
3.Selecto del usuario: se usa para controlar la selectividad del contenido
Valor automático-default, el usuario puede seleccionar el contenido en el elemento
Ninguno: el usuario no puede seleccionar ningún contenido en el elemento
Texto: el usuario puede seleccionar el texto en el elemento
Elemento: el texto es opcional, pero solo dentro de los límites del elemento (solo compatible con IE y FF)
Cabe señalar que el selecto de usuario no es un atributo estándar W3C CSS, y el navegador lo admite de manera incompleta y debe ajustarse para cada navegador.
Descripción del usuario-selección:
Establece o recupera si el usuario puede seleccionar texto.
(1) IE6-9 no admite esta propiedad, pero admite el uso del atributo de etiqueta en selectStart = "return false;" Para lograr el efecto de la selección del usuario: ninguno; Safari y Chrome también admiten este atributo de etiqueta;
(2) Esta propiedad no es compatible hasta Opera12.5, pero al igual que IE6-9, también admite el uso del atributo de etiqueta privada sin selección = "ON" para lograr el efecto de la selección del usuario: Ninguno;
(3) Otro valor no selectable está apagado; En otros navegadores, si el texto se establece en -ms-user-select: ninguno; En otros navegadores, el usuario no podrá comenzar a seleccionar texto en el bloque de texto.
Sin embargo, si el usuario comienza a seleccionar texto en otras áreas de la página, el usuario aún puede continuar seleccionando el texto del área que establece el texto en -ms-user-select: ninguno;.
Analice el siguiente código (Nota: Este código y los resultados del análisis de este código son de W3Help):
<! Doctype html> <html> <body> <divunselectable = "on" style = "background: #cc;" > Unselectable = on </div> <br/> <div style = "fondo: #cc; -webkit-user-select: none;" > -webkit-user-select: none; </div> <br/> <div style = "fondo: #cc; -moz-user-select: none;" > -Moz-User-Select: Ninguno; </div> <br/> <div style = "Background: #cc;" onselectstart = "return false;" > onselectstart = "return false;" </div> </body> </html>
Los efectos en cada navegador son los siguientes:
Nota 1: El contenido se puede deshabilitar.
Nota 2: No se prohíbe el contenido de ser seleccionado.
Se puede ver que el método para prohibir la selección de contenido es el siguiente:
Es decir, establezca unselectable = "on" para la etiqueta, y establezca el método de etiqueta en selectStart = "return false;"
Firefox establece estilos privados para etiquetas -MOZ-User-Select: Ninguno.
Chrome Safari establece un estilo privado para la etiqueta -webkit-user-select: none, y establece el método de etiqueta en selectStart = "return false;".
Opera set no selectable = "on" para etiquetas
Solución
Estilizar estilos para etiquetas -MOZ-USER-SELECT: Ninguno; -Webkit-User-Select: Ninguno al mismo tiempo, establezca sin selección = "ON" para garantizar que todos los navegadores puedan prohibir la selección de contenido.
Si establece el estilo de selección prohibido en la barra de título de la ventana emergente de diferencia flotante en el caso, puede configurarlo así:
<div id = "popup_title" unselectable = "on"> registrar <a href = "javaScript: hidePopup ();"> </a> </div>
.popup_title {-moz-user-select: none; / * Firefox all */ -webkit-user-select: ninguno; /* Chrome All / Safari All / Opera15+* / -Ms-User-Select: Ninguno; /*Ie10*/ -khtml-user-select: ninguno; /* Navegadores tempranos*/ user-select: ninguno; -o-user-select: ninguno; /*Los dos atributos anteriores no son compatibles actualmente, escritos aquí para reducir los riesgos*/}Nota: Este artículo es original, dirección: http://www.cnblogs.com/wanghuih/p/5576910.html
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.