Você já deve ter visto em vários sites uma janela modal. Para quem não a conhece pelo nome é aquela janela que quando clicamos para abri-la ela escurece o resto do site e coloca uma pequena janela em evidência e se você clicar fora da janela ela desaparece.

Vamos criar um exemplo simples onde definiremos os links que irão abrir na forma modal utilizando o atributo rel com o valor modal e a janela que irá abrir será definida pelo atributo href onde colocaremos o id do elemento(div) que queremos que seja visualizado em forma modal.

Marcação HTML

<a href="#janela1" rel="modal">Janela modal</a>
 
<div class="window" id="janela1">
    <a href="#" class="fechar">X Fechar</a>
    <h4>Primeira janela moda</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
    <p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
</div>
 
 
<!-- mascara para cobrir o site -->  
<div id="mascara"></div>

Na linha 1 definimos um link para abrir a janela modal como vimos na introdução.

Na linha 3 criamos uma div que será nossa janela modal, note que definimos uma class e um id, o class vai facilitar caso tivermos várias janelas modal diferentes no site e o id será para abrir somente a correta.

Dentro dela colocamos todo o conteúdo normalmente, só não esqueça de colocar dentro dela um link para fechá-la.

Na linha 12 criamos um div para ser o fundo escuro que irá cobrir toda a área da site ficando acima dela somente a nossa janela.

O CSS

.window{
    display:none;
    width:300px;
    height:300px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
 
#mascara{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}
 
.fechar{display:block; text-align:right;}

Definimos a propriedade diplay em none para os elementos #mascara e .window para que não apareçam quando a página for carregada, já que só serão mostradas quando se clicar no link.

A janela modal será centralizado em relação os navegador e isso será feito por javascript então precisamos apenas definir a propriedade position em absolute e podemos definir as propriedades left e top como “0” já que os valores corretos serão atribuídos por javascript no momento que o link for clicado.

Outra propriedade importante de frisar é o z-index, já que a janela modal deve ficar na frente da mascara devemos definir o z-index do .window maior que o da div #mascara, lembrando que que a div #mascara deve ter um z-index positivo e um pouco alto pois ela deve sobrepor todos os outros elementos da página.

O Javascript

$(document).ready(function(){
    $("a[rel=modal]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara').css({'width':larguraTela,'height':alturaTela});
        $('#mascara').fadeIn(1000); 
        $('#mascara').fadeTo("slow",0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        $(id).show();   
    });
 
    $("#mascara").click( function(){
        $(this).hide();
        $(".window").hide();
    });
 
    $('.fechar').click(function(ev){
        ev.preventDefault();
        $("#mascara").hide();
        $(".window").hide();
    });
});

Como vemos na linha 2 selecionamos todos os link que possuem o atributo rel igual a “modal“ e adicionamos o evento de click a ele. Na linha 3 cancelamos o evento padrão do link(para ele não ir a lugar nenhum) na linha 5 capturamos o valor do atributo href, que no nosso exemplo definimos que seria o id do elemento que irá ser mostrado como janela modal.

Nas linhas 7 e 8 pegamos a largura da janela do navegador e altura documento HTML para definir como tamanho da nossa mascara, se pegarmos a altura da janela do navegador obteremos somente altura da área atualmente visualizada e a mascara preta não irá cobrir tudo se o usuário fizer uma rolagem de página.

Na linha 11 configuramos o tamanho da nossa área de mascara preta com os valores pegos nas linha 7 e 8.

Na linha 12 mostramos a mascara com um efeito de fade e na linha 13 criamos uma transparência.

Na linha 15 calculamos a posição em que a janela modal deve aparecer, para isso pegamos a largura da janela do navegador e dividimos por 2, mas se colocar a janela modal neste ponto ela aparecerá com o canto superior esquerdo centralizado neste ponto, então temos que colocar o meio da janela modal alinhado com o centro da janela do navegador, então dividimos a largura da janela modal por 2 e subtraímos este valor do valor do valor da metade da janela do navegador, isso fará ficar corretamente alinhado. Na linha 16 fazemos isso também para a altura.

Na linha 18 configuramos as propriedades top e left com os valores calculados na linha 15 e 16. Na linha 19 mostramos a janela modal.

Na linha 22 definimos um evento de click para a mascara para quando for clicado fora da janela modal, tanto a janela modal e a máscara preta desapareçam.

Veja o exemplo funcionando

Acredito que seja isso, é bem simples e permite ter uma personalização bem grande de forma fácil, diferente de utilizar alguma biblioteca como o jQuery UI, que é muito bonita e fácil de utilizar, mas se precisar mudá-la pode ser um desafio.

Esse artigo foi “baseado” no do imortal Maujor

obs.:(14/09/2012) Veja um exemplo onde o conteúdo do é carregado de uma arquivo separado