JavaScript PopUp Un elemento div en el centro de la página web
Este blog explicará los métodos para aparecer un elemento div en el centro de la página web en JavaScript.
Cómo aparecer un elemento div en el centro de la página web en JavaScript?
Para aparecer en un elemento Div en el Centro de la página web en JavaScript, se pueden aplicar los siguientes métodos:
- "documento.QuerySelector ()" Método
- "documento.getElementById ()" Método
- "JQuery"
Los enfoques mencionados se demostrarán uno por uno!
Método 1: emergente un elemento div en el centro de la página web en JavaScript usando el documento.método QuerySelector ()
El "documento.QuerySelector ()El método obtiene el primer elemento que coincide con el selector CSS correspondiente. Este método se puede utilizar para acceder al "divEl elemento para acceder a las funcionalidades correspondientes y mostrarlas.
Sintaxis
documento.QuerySelector (selectores CSS)Aquí, los selectores de CSS se refieren a "div", Que se accederá.
El siguiente ejemplo explica el concepto declarado.
Ejemplo
En primer lugar, asigne el especificado "clase" y "identificación"Para el elemento Div agregado. Para la ventana emergente, asigne la clase llamada "surgir"Para el elemento Div. Luego, incluya un rumbo especificado en el ""Etiqueta y botones separados para abrir y cerrar la ventana emergente. También adjunte un "al hacer clic"Evento a ambos botones invocando las funciones especificadas:
Este es un elemento emergente centrado
Después de eso, declare una función llamada "opendiv ()"Para buscar el"div"Elemento pasando su identificación en el"documento.QuerySelector ()"Método y configure su pantalla como"bloquear"Para comenzar el bloque en una nueva línea y tomar el ancho de la pantalla:
función opendiv ()Deje obtener = documento.QuerySelector ('#div')
conseguir.estilo.display = 'bloque'
Del mismo modo, defina el "cerrado ()"Función y repita los pasos anteriores para cerrar la ventana emergente especificando"ninguno"Como valor de propiedad de visualización:
función cerrada ()Deje obtener = documento.QuerySelector ('#div')
conseguir.estilo.Display = 'Ninguno'
Por último, diseñe los divs agregados de acuerdo con sus requisitos:
Se puede ver que cuando el "Mostrar ventanas emergentesSe hace clic en el botón, se aparece un nuevo elemento Div en el centro de la página web:
Método 2: emergente un elemento div en el centro de la página web en JavaScript usando el documento.método getElementById ()
El "documento.getElementById ()El método "obtiene un elemento con la ID especificada. Este método se puede implementar para acceder a la ID especificada para abrir y cerrar la ventana emergente creada.
Sintaxis
documento.getElementById (ElementId)En la sintaxis dada, "elemento"Indica la identificación del elemento particular que necesita ser recogido.
Ejemplo
En primer lugar, agregue dos divs como lo hicimos anteriormente. Luego, incluya una imagen y especifique su camino junto con sus dimensiones para estar contenidas dentro de la ventana emergente. Después de eso, incluya los siguientes botones junto con un "al hacer clic"Evento como se discutió en el método anterior:
Ahora, en los métodos OpenDiv () y cerrado (), utilice el documento.Método getElementById () para acceder al DIV requerido y establecer su valor de propiedad de visualización en consecuencia:
función opendiv ()Deje obtener = documento.GetElementByid ('Div')
conseguir.estilo.display = 'bloque'
función cerrada ()
Deje obtener = documento.GetElementByid ('Div')
conseguir.estilo.Display = 'Ninguno'
Por último, diseñe su página web según sus requisitos:
Producción
Método 3: emergente un elemento div en el centro de la página web en JavaScript usando jQuery
En este método en particular, implementaremos la tarea requerida aplicando "jQuery"Junto con sus métodos para mostrar y ocultar la ventana emergente creada.
El siguiente ejemplo ilustra el concepto declarado.
Ejemplo
Primero, incluya el "jQueryBiblioteca en la etiqueta de script:
Del mismo modo, asigne la siguiente clase y ID al "div"Elemento para el documento general y la ventana emergente respectivamente. Luego, incluya el siguiente párrafo dentro de la ventana emergente. Además, repita los métodos discutidos para incluir los botones que invocan las funciones especificadas al activar el "al hacer clic" evento:
Las páginas web o los sitios que visita a menudo permiten que el usuario espere para mostrar un mensaje importante o una advertencia antes de acceder a la página en particular. Por ejemplo, pedirle a un usuario que compre la membresía o iniciar sesión antes de acceder al contenido del sitio. Además de eso, la gestión apropiada del tráfico en el caso de los sitios web educativos
Mostrar ventanas emergentes
Ahora, cree una función llamada "opendiv ()"Eso accederá a la Div que tiene"cubrir"ID y aplique el"espectáculo()Método "para mostrar la ventana emergente creada:
función opendiv ()$ ('#struct').espectáculo();
Para cerrar la ventana emergente, defina la función llamada "cerrado ()"Y en su definición de función, invoca el"esconder()Método "en la ID de acceso para cerrar la ventana emergente:
función cerrada ()$ ('#struct').esconder();
Por último, diseñe su elemento de página web en consecuencia:
Producción
Hemos discutido varios métodos creativos para aparecer en un elemento div en el centro de la página web en JavaScript.
Conclusión
Para aparecer en un elemento div en el centro de la página web en JavaScript, aplique el ""documento.QuerySelector ()"Método o el"documento.getElementById ()"Método para obtener el Div creado usando su identificación para explotarlo. Además, también puedes utilizar el "jQueryBiblioteca para incluir un elemento div en la forma de una ventana emergente aplicando sus métodos incorporados. Este blog demostró los métodos que se pueden aplicar para aparecer un elemento Div en el Centro de la página web en JavaScript.