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>