Crear una ventana modal con JavaScript

Javascript

Podríamos utilizar una librería de JQuery para crear ventanas modales, pero en este caso, lo haremos sólo con JavaScript.

Por un lado tendríamos el siguiente html:

<button id="btnModal">Abrir modal</button> 
<div id="myModal" class="modalContainer">
 <div class="modal-content">
 <span class="close">×</span> <h2>Modal</h2>
 <p>Se ha desplegado el modal y bloqueado el scroll del body!</p> </div>
 </div> 

Sería un botón por un lado, y el modal por otro. Con el siguiente CSS daríamos estilos al modal y lo ocultaríamos por defecto:

	.modalContainer {
			display: none; 
			position: fixed; 
			z-index: 1;
			padding-top: 100px;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%; 
			overflow: auto; 
			background-color: rgb(0,0,0);
			background-color: rgba(0,0,0,0.4);
		}

		.modalContainer .modal-content {
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			border: 1px solid lightgray;
			border-top: 10px solid #58abb7;
			width: 60%;
		}

		.modalContainer .close {
			color: #aaaaaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.modalContainer .close:hover,
		.modalContainer .close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

Ahora, el código JavaScript:

if(document.getElementById("btnModal")){
			var modal = document.getElementById("myModal");
			var btn = document.getElementById("btnModal");
			var span = document.getElementsByClassName("close")[0];
			var body = document.getElementsByTagName("body")[0];

			btn.onclick = function() {
				modal.style.display = "block";

				body.style.position = "static";
				body.style.height = "100%";
				body.style.overflow = "hidden";
			}

			span.onclick = function() {
				modal.style.display = "none";

				body.style.position = "inherit";
				body.style.height = "auto";
				body.style.overflow = "visible";
			}

			window.onclick = function(event) {
				if (event.target == modal) {
					modal.style.display = "none";

					body.style.position = "inherit";
					body.style.height = "auto";
					body.style.overflow = "visible";
				}
			}
		}

Nuestro código hará lo siguiente: Al pulsar el botón, hará visible nuestro modal, y al mismo tiempo oscurecerá el resto de la página. Al clicar en la X o fuera del modal, se cerrará.

Por otro lado, para evitar que tengamos dos scroll en caso de que el body sea largo y el contenido del modal también, al desplegar la ventana modal bloquearemos el tamaño y posición del body para que no se pueda hacer scroll en el.

Ver ejemplo en funcionamiento

4 comentarios

Hola gente de AdaWeb.

Vuestro artículo está excelente. Me va de lujo.

Hay un detalle que no logro entender: al abrir la modal el body se mueve ligeramente hacia la derecha, sabrán el motivo de este comportamiento?

El otro detalle, que yo en lo particular estoy confrontando, es que dentro de la modal tengo un contenido bastante largo, y también, para comodidad del lector de ese contenido, he definido unas anclas para que se pueda desplazar a secciones específicas, pero cuando intento usar esa funcionalidad en lugar de moverse dentro de la modal se mueve es en el body, en la ventana principal: sabes cómo puedo evitar esto y que se mueva solo dentro de la modal?

Muchísimas gracias,

Buenos días Miguel.

El movimiento se debe a que al desplegar la ventana modal, desaparece la barra de scroll. Si modificamos el código JavaScript para eliminar las líneas que hacen referencia a «body.style.overflow» ya no verás el desplazamiento.

En cuanto a lo que comentas sobre las anclas, he realizado una prueba en Firefox y en Chrome, realizando algunhas modificaciones al código y me funciona correctamente.

Te dejo el enlace de descarga aquí: http://code.adaweb.es/005-modal-anchor.zip

Un saludo.

se puede colocar mas botones para que abra mas ventanas modales en la misma pagina?

Hola estoy intentando colocar varios botones de diferentes modales en una misma pagina pero no ha funcionado, sabe si se tiene que modificar?

Escribe una respuesta


2 + 8 =