¿Cómo utilizar jquery para abrir un div y mostrarlo debajo del cuadro de texto?
El cuadro emergente de JQuery puede mostrar el modo de alarma y el modo de confirmación de dos maneras.
El cuadro de aviso emergente en el modo de alerta temprana solo tiene una opción, que es Aceptar y aviso opcional.
El modo de confirmación es un cuadro de aviso con una función de selección. El usuario puede hacer clic en Aceptar o Cancelar.
P está cubierto, ¿cómo hacer que la capa P aparezca en la capa más externa Z?
pOcclusion está controlada principalmente por el atributo z-index en CSS, mientras que jquery es solo un control dinámico, $(selector). CSS('índice z',1)$(selector2). CSS('índice z', 2).
¿Cómo hacer clic en un botón para mostrar la P oculta?
El método más simple de html de muestra: la función de toggle() es ocultar el objeto cuando se muestra y mostrarlo cuando está oculto. -Si necesita implementar otras funciones además de mostrar y ocultar, puede hacer esto: aquí puede personalizar una clase: mostrar para determinar si P se muestra u oculta hasClass (), y si hay un determinado objeto oculto classhide () show() para eliminarClass classaddClass() y agregar una clase. Además, puede configurar el CSS de esta P a través de jquery: display.
¿Cómo muestra jquerylayer el elemento interno html especificado?
La capa emergente básica debe cumplir los siguientes requisitos:
1 Haga clic en el botón/enlace para activar la capa emergente, que debe tener una capa de máscara semitransparente.
2. Al hacer clic en el botón cerrar, cancelar o enmascarar la capa de la capa emergente se cerrará la capa emergente oculta
3. tecla para cerrar la capa emergente;
4. Es responsivo y compatible con los principales navegadores modernos.
Lenguaje de marcado de hipertexto
1. Primero, colocamos un enlace en la página para activar la capa emergente, o puede ser un botón. Tenga en cuenta que le configuramos un atributo de capa de presentación de datos, que corresponde a la identificación de la capa emergente, lo que significa que la capa emergente está asociada a través de la capa de presentación de datos.
2. Obviamente, la identificación de la capa emergente asociada con el enlace anterior es hw-layer. Bueno, seleccione el código html de la capa hw que vamos a abrir.
3. Usaremos CSS para controlar la capa más externa de la capa emergente, que es la capa de máscara. hw-overlay, esta es una capa semitransparente que se utiliza para separar la capa emergente del contenido principal de la página. Entonces, en. hw-layer-wrap la capa principal, podemos configurar el contenido de la capa emergente. Por supuesto, el contenido depende de usted. La capa de contenido que aparece en este artículo es un cuadro de diálogo de confirmación, similar a la confirmación () de la ventana. El contenido utiliza el diseño de cuadrícula col-* de bootstrap y los íconos de fuente de glifos. De hecho, lo más importante es necesitar una capa de máscara y una capa de texto. El contenido se puede personalizar según las necesidades del proyecto, ya que puede ser una tabla o una descripción de texto puro.
Semiacero fundido
1 y CSS también son piezas clave. Primero configuremos la capa de máscara. De forma predeterminada, debe ser invisible, estar fijo en su posición y cubrir toda la página. Todavía es translúcido. Establecemos el fondo en negro y la transparencia en 0,3, como color de fondo: rgba (0, 0, 0, 3). Luego viene la planta principal. hw-layer-wrap, configuramos su ancho y calculamos su posición. Podemos preestablecer el valor de ancho. Debido a que el contenido de altura no está definido, no es necesario establecer un valor específico aquí. Manejaremos la altura en la parte js más adelante y luego configuraremos los efectos de centrado y sombra del borde.
Para configurar el centrado horizontal y vertical, consulte el artículo de Helloweba: Cómo centrar horizontal y verticalmente un DIV. El estilo del contenido en la capa emergente se puede configurar libremente, lo que finalmente resuelve el problema de usar mediaquery para configurar la capa emergente en el centro de la pantalla pequeña.
2. Usamos jQuery para manejar los efectos de activar la capa emergente y cerrar la capa emergente, por lo que necesitamos precargar la biblioteca jQuery. ShowLayer(id) es una función personalizada que se utiliza para mostrar capas emergentes. Cuando hace clic en un botón o enlace para llamar a esta función showLayer(id), mostrará gradualmente el efecto y calculará la distancia de desplazamiento de altura de la capa emergente para que la capa principal emergente esté centrada horizontal y verticalmente. La función de hideLayer () es ocultar la capa emergente, lo que se puede lograr mediante fadeOut () u hide (). Finalmente, agregue código que cierre la capa emergente cuando se active la capa de máscara y código que cierre la capa emergente cuando se use el botón Esc.
3. De hecho, en este punto, se ha completado un efecto de capa emergente básico. Aquí solo estamos creando una capa emergente básica, también puedes continuar expandiendo el código. Hemos visto muchos complementos de capas emergentes, muchos de los cuales operan dinámicamente el DOM directamente, es decir, primero crean un elemento a través del código js y luego agregan el contenido al texto. Si opera el DOM con frecuencia, este método consumirá una cierta cantidad de rendimiento, por lo que desde una perspectiva de rendimiento, recomiendo utilizar el método de capa emergente proporcionado en este artículo.