JavaScript Popup un elemento Div en el centro de la página web
- ¿Qué es una ventana emergente?
- Diseñar una ventana emergente
- Abrir y cerrar ventana emergente en JavaScript
- Abrir y cerrar ventana emergente usando jQuery
Este tutorial abordará cómo abrir una ventana emergente en el centro de la página web. Para empezar, tenemos las siguientes consultas para abordar en este artículo:
- ¿Qué es una ventana emergente?
- Diseñar una ventana emergente
- Abrir y cerrar ventanas emergentes en JavaScript
- Abrir y cerrar ventanas emergentes usando jQuery
¿Qué es una ventana emergente?
Una ventana emergente es una ventana pequeña o un cuadro pequeño que se abre en una ventana sobre el contenido subyacente.
El principal caso de uso de una ventana emergente es centrarse en cierta información en lugar de todo el contenido, lo que solicita al usuario que confirme. Alternativamente, una ventana emergente también se llama Modal.
Diseñar una ventana emergente
El estilo de una ventana emergente es importante por la única razón de que desea que se muestre sobre el contenido principal o al menos necesita dar la ilusión de que está sobre el contenido principal. Veremos cómo hacerlo con el siguiente ejemplo:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
height: 100%;
}
.overlay {
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
.popup {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
text-align: center;
background: white;
}
.popup h3 {
font-size: 15px;
height: 50px;
line-height: 50px;
color: black;
}
.CloseIcon{
cursor: pointer;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay" id="overlay">
<div class="popup">
<div onclick="CloseModal()" class="CloseIcon">✖</div>
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
En este ejemplo simple, hemos creado un botón que mostrará la ventana emergente. Pero lo más importante, tenemos un elemento overlay que estará sobre todo el contenido en un ligero color negro, dificultando así que el usuario vea ese contenido.
Luego creamos un elemento popup y lo diseñamos para que apareciera sobre el elemento overlay y el centro de la página web. Al hacerlo, hemos logrado ocultar el contenido principal.
Cuando se abre una ventana emergente en el medio de la pantalla, llamará la atención del usuario porque será lo único que verá con claridad. Pero el elemento overlay está configurado como none, por lo que no aparece en este momento.
La pregunta es, ¿cómo cambiamos una ventana emergente? Podemos hacerlo usando JavaScript o jQuery. Vamos a discutir ambos en detalle a continuación.
Abrir y cerrar ventana emergente en JavaScript
Podemos usar JavaScript para alternar la propiedad de estilo emergente; podemos hacer esto accediendo al elemento DOM y su propiedad style y cambiando el tipo display de none a block haremos que el popup se muestre.
Del mismo modo, podríamos volver a cambiar a none una vez que el usuario haga clic en el icono de cerrar. Ilustremos esto con un ejemplo.
function OpenModal() {
let element = document.getElementById('overlay')
element.style.display = 'block'
}
function CloseModal() {
let element = document.getElementById('overlay')
element.style.display = 'none'
}
Abrir y cerrar ventana emergente usando jQuery
Alternativamente, podríamos repetir lo mismo con jQuery. Echemos un vistazo al código fuente y los cambios necesarios.
function OpenModal() {
$('#overlay').show();
}
function CloseModal() {
$('#overlay').hide();
}
Usamos el método jQuery show y hide en este ejemplo. En lugar de cambiar la propiedad de display de none a block, show elimina la propiedad display en el elemento, y de manera similar, hide establece la propiedad display en none.
show solo funciona con display:none o elementos ocultos con jQuery; no funciona con la propiedad visibility de CSS.Además, asegúrese de agregar jQuery CDN en el encabezado (o instale el paquete jQuery) cuando use jQuery.