Como se llama esto??

[fede5426]

Te dejo un ejemplo sin tantos estilos, quizás así puedas entender más o menos como hacerlo con tu propio código.

Código HTML:

<div class="modal">
    <div class="ventana">
        <button class="cerrar">Cerrar</button>
        <img src="http://dummyimage.com/300x300/012345/ccc" alt="" />
    </div>
</div>
 

Código CSS:

body{
    background-image:url("http://oi59.tinypic.com/bgafkz.jpg");
    background-size:100%;
    background-repeat:no-repeat;
}
 
.modal{
    width:100%;
    height:100%;
    position:absolute; 
    top:0;
    left:0;
    background-color:rgba(0,0,0,.6)
}
 
.ventana{
    width:300px;
    height:300px;
    padding:1em;
    background-color:#ccc;
    position:absolute;
    top:20%;
    left:-150px;
    margin-left:50%;
}
 
.cerrar{
    position:absolute;
    bottom:2em;
    right:2em;
    cursor:pointer;
    }
 

Código Javascript:

$(document).ready(function(){
    
    $(".cerrar").click(function(){
        
     $(".modal").fadeOut(300);
        
    })
    
});
 

http://codepen.io/fede5426/pen/mJOYBG

En ese ejemplo use una imagen de fondo en el body para simular el sitio que esta por detrás de la ventana modal.

* El div con clase "modal" es la pantalla negra.
* El div con clase "ventana" es, lógicamente, la ventana donde va a ir el contenido. Dentro de ese div deberías poner todo lo que quieras que contenga la ventana, textos, imágenes, un formulario, lo que quieras. Y a demás un botón para cerrarlo.

Así como está el código del ejemplo, al entrar al sitio te encontrarías con esa ventana.. si quisieras que aparezca por ejemplo presionando un botón, habría que modificar un poco ese código. También se puede hacer que clickeando cualquier parte de la pantalla, la ventana se cierre.

Si hay algo que no entiendas, pregunta

Saludos