JavaScript muestra un elemento Div en el centro de la página web
- Diseñar una ventana emergente en HTML
- Abrir y cerrar ventana emergente en JavaScript
- Abrir y cerrar ventana emergente con jQuery
En este artículo tutorial, discutiremos cómo abrir una ventana emergente en el centro de la página web.
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, por ejemplo, pedirle a un usuario que confirme. Alternativamente, una ventana emergente también se llama Modal.
Diseñar una ventana emergente en HTML
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: #fff;
background: white;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay">
<div class="popup">
<div onclick="CloseModal()">✖</div> <!-- Shows Close Icon -->
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
Entonces, en este ejemplo simple, creamos un botón que se usará para mostrar la ventana emergente.
Pero lo más importante, tenemos un elemento de overlay que estará sobre todo el contenido en un ligero color negro, dificultando así que el usuario vea ese contenido.
Creamos un elemento popup y lo diseñamos para que apareciera sobre el elemento overlay y en 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 de los usuarios porque eso será lo único que un usuario podrá ver claramente. Pero un aviso rápido en caso de que te lo hayas perdido, el elemento overlay está configurado en none, por lo que ahora aparece en este momento.
Por lo tanto, la pregunta es, ¿cómo cambiamos una ventana emergente? Podemos hacer eso usando JavaScript o jQuery. analicemos ambos en detalle a continuación
Abrir y cerrar ventana emergente en JavaScript
Podemos usar JavaScript para alternar la propiedad de estilo de una ventana emergente, podemos hacer esto accediendo al elemento DOM y luego a su propiedad style y luego cambiando el tipo display de none a block hará que el popup se muestre. Del mismo modo, podríamos volver a cambiarlo a none una vez que el usuario haga clic en el icono de cierre. Veamos 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 con 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();
}
En este ejemplo, usamos los métodos show y hide de jQuery. En lugar de cambiar la propiedad de show de none a block, show elimina la propiedad show en el elemento, y de manera similar, hide establece la propiedad show en none.
Nota: el 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.