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