Crie uma janela modal com CSS puro

Para quem não acessa a Internet há uns anos, janelas modal são aquelas que abrem no meio da página e que deixam o fundo meio sombreado. Existem vários plugins que podem realizar isso, a maioria em jquery.

Há um tempo atrás, achei o CSS Modal, uma nova proposta de construção de janelas modal: com CSS puro.

Para fazer uso, basta baixar o arquivo e fazer a inclusão na sua página no head:

<link rel="stylesheet" href="css/modal.css">

Depois basta aplicar a classe

<section class="semantic-content" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
</section>

O header e o footer dentro da classe modal-inner são opcionais.