¿Cómo aparece la capa jquery en elementos específicos en html?

Una capa emergente básica debe cumplir los siguientes requisitos:

1. Al hacer clic en un botón/enlace se activará la capa emergente, y la capa emergente debe tener una. capa de máscara translúcida;

2. Al hacer clic en el botón cerrar, cancelar o capa de máscara de la capa emergente se cerrará y ocultará la capa emergente

3. La tecla Esc también cerrará la capa emergente;

4. Es responsivo y compatible con los principales navegadores modernos.

HTML

1. Primero, colocamos un enlace en la página para activar la capa emergente. También puede ser un botón. it -layer atributo, el valor de este atributo corresponde a la identificación de la capa emergente, es decir, la capa emergente está asociada a través de data-show-layer. En otras palabras, la capa emergente está asociada con la capa de presentación de datos.

2. Obviamente, la identificación de la capa emergente asociada con el enlace anterior es hw-layer. Entonces, preparemos el código html para la capa emergente hw-layer.

3. La capa más externa de nuestra capa emergente, que es la capa de máscara .hw-overlay, usaremos CSS para controlarla para que sea una capa semitransparente para separar la capa emergente. y el contenido principal de la página. En la capa principal de hw-layer-wrap, podemos configurar el contenido de la capa emergente. Por supuesto, usted puede decidir el contenido de la capa emergente. capa superior con ejemplos. Es un cuadro de diálogo de confirmación similar a la ventana de confirmación (). El contenido utiliza el diseño de cuadrícula col-* de bootstrap y los íconos de fuente de glifos. De hecho, lo más crítico es que se necesita una capa de máscara y una capa principal. El contenido se puede personalizar según las necesidades del proyecto, ya que puede ser un formulario o una descripción de texto plano.

CSS

1. CSS también es la parte clave cuando configuramos por primera vez la capa de máscara. Debe ser invisible de forma predeterminada, tener una posición fija y cubrir toda la página. Aún es translúcido, configuramos el fondo en negro y la transparencia en 0.3, como color de fondo: rgba(0,0, 0,0.3), color de fondo: rgba(0,0, 0,0.3, 0, 0,3, 0,0,3, 0,0,3) 0,0,3). Luego viene la capa del cuerpo .hw-layer-wrap, configuramos su ancho y calculamos su posición. Podemos preestablecer un valor para el ancho. La altura es más o menos incierta debido al contenido. No tenemos que establecer un valor específico aquí. La altura se procesará en los js posteriores y luego los efectos como el centrado. y se establecerá la sombra del borde. Para obtener más información sobre el centrado horizontal y vertical, consulte el artículo de Helloweba: Cómo centrar un DIV horizontal y verticalmente. El contenido dentro de la capa emergente se puede ajustar libremente en estilo y, finalmente, las consultas de medios se pueden usar para establecer la posición central de la capa emergente en pantallas pequeñas.

2. Usamos jQuery para manejar los efectos de activar la capa emergente y cerrar la capa emergente. La biblioteca jQuery debe estar precargada. showLayer(id) es una función personalizada que se utiliza para mostrar la capa emergente. Esta función showLayer(id) se llama cuando se hace clic en un botón o enlace. Mostrará el efecto de degradado y calculará la distancia de desplazamiento de altura de la capa emergente para que la capa emergente principal esté centrada horizontal y verticalmente. La función hideLayer() es ocultar la capa emergente y puede implementar fadeOut() u hide(). Finalmente agregue código para cerrar la capa emergente cuando se activa la capa de máscara y para cerrar la capa emergente cuando se usa el botón Esc.

3. De hecho, aquí se ha completado un efecto de capa emergente básico. Acabamos de crear una capa emergente básica aquí, puede continuar expandiendo el código.

Hemos visto muchos complementos de capa emergente, muchos de los cuales operan dinámicamente el DOM directamente, es decir, createElement primero a través del código js y luego agrega el contenido al cuerpo. Este método consumirá una cierta cantidad de rendimiento. DOM se opera con frecuencia, por lo que desde una perspectiva de rendimiento, recomiendo utilizar el método de capa emergente proporcionado en este artículo.