Espacio con cosas que deseo compartir, principalmente código fuente, sé que existen lugares ya dedicados a eso, pero a mi me gusta hacerlo de esta manera. Advertencia: Algunos códigos son básicos y solo tienen la intención de dar una idea de como hacer las cosas.
Existen ocasiones en las que deseas crear una capa nueva con contenido informativo y que se muestre por encima de los elementos ya cargados de la página, algo así como una ventana modal o algo parecido, si utilizas bootstrap no tendrias ningun problema para mostrar una ventana modal, pero la situación es simple y lo quieres hacer desde cero, aqui dejo un ejemplo de como se puede hacer.
$(function () {
$("#boton_nueva_capa").click(function(e)
{
var subVentana = document.createElement('div');
subVentana.className = "capa_encima";
subVentana.setAttribute("style","position: absolute; top: " + this.offsetTop + "px; left: " + this.offsetLeft + "px; z-index: 5000; background-color: #9a9a9a; width: 30%; height: 10%;");
var btnCerrarSubVentana = document.createElement('button');
btnCerrarSubVentana.innerHTML = 'Cerrar';
var SubdivDatos = document.createElement('div');
SubdivDatos.innerHTML = 'Contenido informativo que se desea mostrar';
subVentana.appendChild(btnCerrarSubVentana);
subVentana.appendChild(SubdivDatos);
btnCerrarSubVentana.onclick = function(){
$(".capa_encima").remove();
};
$('#principal').after(subVentana);
});
});
<div id="principal"><span id="boton_nueva_capa" style="cursor:pointer; border:1px solid #333333;"> Crear capa nueva </span></div>