Neste tutorial irei mostrar como fazer o efeito janela modal usando jquery. Portanto, se você ainda não possui a biblioteca do jQuery em sua máquina, baixe-o, pois iremos trabalhar com ela! Para baixar a ultima versão do jQuery acesse jquery.com. Após baixar a biblioteca de scripts jquery, renomeia para apenas jquery.js (geralmente vem seguido da versão, por isso a importância de renomear).

Agora adicione o jquery.js na pasta onde você salvará os arquivos que serão aplicados a este tutorial! Agora crie um arquivo em HTML e salve-o com um nome qualquer.
Para chamar o jquery.js para o documento html use a seguinte tag dentro da tag head:



Dentro do body da página inclua:

Demonstração do efeito modal

Primeira janela com efeito modal.

Segunda janela com efeito modal.



O atributo ID recebe o nome que foi definido no atributo name do link (da tag de ancora). Veja: Atributo name na ancora:
Primeira janela com efeito modal.


Atributo ID com o nome que foi definido na ancora. Veja:



Formatação do efeito com CSS


Dentro da tag head do html adicione a tag que chama o estilo.css. Veja a tag:

Em seguida crie um documento e salve-o como estilo.css. Depois copie o código abaixo e cole na página de estilos.
#mask{
position:absolute; /* important */
top:0px; /* start from top */
left:0px; /* start from left */
height:100%; /* cover the whole page */
width:100%;  /* cover the whole page */
display:none; /* don't show it '*/

/* styling bellow */
background-color: black;
}

.modal_window{
position:absolute; /* important so we can position it on center later */
display:none; /* don't show it */

/* styling bellow */
color:white;
}

/* style a specific modal window  */
#modal_window{
padding:50px;
border:1px solid gray;
background: #246493;
color:black;
}


Agora iremos adicionar o codigo que faz funcionar o efeito modal.
Dentro da tag head do html adicione:


Efeito concluído!

Como criar novos links com efeito modal?


Simples! Como disse no começo; na tag da ancora (de link) adicione o atributo name seguido do nome da ancora. Na div que contem o texto que será mostrado ao clicar no link defina um ID com o nome que foi atribuído à ancora. Igual ao nosso exemplo. Outro detalhe é que não precisa definir o id somente em div. Pode ser também em uma tag de paragrafo, por exemplo. Espero que tenham gostado da dica. O arquivo do tutorial encontra-se em anexo.