19th Ave New York, NY 95822, USA
+1 916-875-2235
+1 916-875-2235

Crear una ventana modal con 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="tvesModal" 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("tvesModal");
			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

Escribe una respuesta