Simples Modal - CSS - jQuery

Demonstrarei como fazer uma simples modal utilizando CSS e um pouquinho de jQuery. Então vamos lá.

O HTML

<div class="containerModal">
    <div class="modalBox">
        <div class="close"><img src="images/close.png" alt="Fechar"></div>
        <!-- Conteúdo da modal -->
    </div>
</div>

Apenas observe que estou utilizando uma imagem para fechar a modal chamada close.png, então altere para uma imagem de sua preferência.

O CSS

* {
    margin: 0px;
    padding: 0px;
}
.containerModal {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}
.modalBox {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #EEEEEE;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
}
.close {
    position: absolute;
    top: -18px;
    right: -18px;
    cursor: pointer;
}

CSS simples, explicando rapidamente, primeiro zeramos as margins e paddings de todos os elementos, depois aplicamos há div containerModal um posicionamento fixo, para seguir a tela, com um background preto transparente, e altura e largura de 100%.

Para o container da modal onde ficará o conteúdo aplicamos um posicionamento absoluto e arredondamos as bordas, também empurramos o container 50% para baixo e para direita, para poder centralizar.

E por fim estilizamos o botão de fechar que no nosso caso é uma imagem.

O jQuery

E por fim nosso jQuery, bem simples também, ele apenas irá centralizar exatamente o container da modal no centro da tela, e aplicará a funcionalidade de fechar a modal.

$(document).ready(function(){
    // Pega a altura da div modalBox
    var altura = $('.modalBox').height() / 2;
    // Pega a largura da div modalBox
    var largura = $('.modalBox').width() / 2;

    // Aplica as margens negativas para centralizar a modalBox
    $('.modalBox').css({
        'margin-top': '-' + altura + 'px',      
        'margin-left': '-' + largura + 'px'
    });

    // Fecha toda a modal
    $('.close').click(function(){
        $('.containerModal').remove();
    });
});

Não esqueça de importar a biblioteca jQuery no documento, o código completo você pode ver no exemplo a seguir.