Cómo crear una ventana emergente modal utilizando JavaScript y CSS

Question

En realidad, dos preguntas:

• ¿Cómo puedo crear una ventana emergente modal con el color de fondo de gris?
• También necesito crear un color de fondo de portada solo para la tabla. No a la página general.

¿Cómo hago esto usando javascript y css?

Answer 1

Aquí está el HTML, que probablemente debería insertarse con JS, y los estilos deberían estar en una hoja de estilo externa.

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div> 

Luego, puede aprovechar jQuery para mostrarlo.

$('a.modal').bind('click', function(event) { 
    event.preventDefault(); 
    $('#modal').fadeIn(800); 
}); 

Esto es sólo el comienzo, querrás aprender de esto y construir sobre él. Por ejemplo, el script debe marcar is(':hidden') y mostrar, y si no, entonces fadeOut(800) o similar.

Answer 2

lo uso para la máscara que se siente en la parte superior de la pantalla

.Mask { 
    display: none; 
    width: 100%; 
    height: 100%; 
    z-index: 9000; 
    padding: 0px; 
    margin: 0px; 
    background: transparent url(http://i.imgur.com/0KbiL.png); 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
}