Ventana emergente para texto y/o gráfico

[Alexis88]

Yo hago eso con Divs, estilos y un poco de jQuery.

Código HTML:

<div id = "fondo"></div>
<div id = "contenido"></div>
<button id = "pop">POP UP</button>
 

Código CSS:

#fondo {
    background: rgba(0, 0, 0, .75);
    z-index: 1000;    
}
 
#contenido{
    width: 50em;
    height: 30em;
    margin: -15em 0 0 -25em;
    top: 50%;
    left: 50%;
    z-index: 2000;
    background: #fff;
}
 
#fondo, #contenido{
    display: none;
    position: absolute;
}
 

Código Javascript:

$("#pop").click(function(){
    var altoW = $(window).height() * 2,
        anchoW = $(window).width() * 2;
  
    $("#fondo").css({
        "width": altoW,
        "height": anchoW
    });
  
    $("#fondo, #contenido").fadeIn(1200);
    $("body").css("overflow", "none");
});
 
$("#fondo").click(function(){
    $("#fondo, #contenido").fadeOut(1200);
    $("body").css("overflow", "auto");
});
 

Tengo dos Divs, uno que será mi fondo oscuro y otro para mostrar el contenido, además de un botón que los activará. En la hoja de estilos, les asigno los colores, dimensiones y los oculto.

En el archivo JS, le asigno al botón el método click para que cuando sea pulsado, se ejecute una función con un conjunto de instrucciones. En la función, tomo el doble del ancho y alto de la ventana y se lo asigno al Div de fondo, esto debido a que debe ocupar todo el fondo sin dejar espacio alguno, luego, muestro los Divs con el método fadeIn y oculto las barras de desplazamiento del cuerpo del documento (no del Div con la información). Para ocultar los Divs, solamente debo darle un clic al fondo oscuro y éstos se ocultarán con el método fadeOut, además, vuelvo a hacer visible las barras de desplazamiento del documento.

Así es como se ve: http://jsbin.com/AhiLANod/2
Y aquí tienes más efectos para usar: http://api.jquery.com/category/effects/

Saludos