Como usar jQuery para Gerar Pop-Up Modal quando clicado

Como usar jQuery para Gerar Pop-Up Modal quando clicado

Uma caixa modal é uma janela pop-up que força o usuário a interagir com ela antes de retornar ao site. As caixas modais são úteis para avisos, caixas informativas, e muito mais. Você pode criar uma caixa modal com jQuery. Se você não está familiarizado com jQuery, confira nosso artigo jQuery Basics para uma explicação de como jQuery funciona.

Esta é uma exibição de código interativo que mostra o HTML, CSS, jQuery, e uma demonstração da saída.

Modal HTML

Para criar um pop-up modal, você precisa primeiro estabelecer a estrutura HTML.

É necessário criar classes para o pop-up overlay e conteúdo pop-up para que você possa editá-las separadamente do resto do documento.

Este exemplo cria as classes “popup-overlay” e “popup-content” para habilitar o CSS a estilo especificamente.

Notem os elementos de botão neste exemplo. Nós adicionamos botões que queremos ativar o popup. A um botão foi dada a classe “abrir”, enquanto o outro tem a classe “fechar”. Estes serão usados posteriormente para abrir e fechar o pop-up.

Modal CSS

No CSS, você deve estilizar as classes “popup-overlay” e “popup-content” para que elas estejam inicialmente ocultas. Um popup não seria um popup se fosse visível desde o início. Podemos ocultar o popup alterando a visibilidade das classes:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Agora, não queremos que o popup fique escondido para sempre, por isso precisamos fazer um caso especial de uso no CSS para quando o popup deve ser mostrado. Vamos usar jQuery para ajudar a determinar quando o pop-up deve ser visível.

jQuery tem a habilidade de adicionar e remover classes com base em ações (como clicar). Então, se programarmos o jQuery para adicionar uma classe chamada “active” quando o botão “open” é clicado, podemos usar a classe “active” no CSS para mostrar o pop-up. Anexe a classe “active” às classes pop-up e crie um novo estilo para quando o pop-up estiver visível.

Veja o exemplo abaixo para ver como este estilo CSS deve ficar:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modal jQuery

Agora é hora de adicionar o jQuery. Certifique-se de configurar o seu documento HTML para jQuery antes de adicionar qualquer código jQuery. Se você não tem certeza de como fazer isso, veja nosso artigo Preparando seu HTML para jQuery.

Então quando os botões “Abrir” e “Fechar” HTML são clicados, jQuery precisa adicionar ou remover a classe “ativa”.

Esta primeira instrução adiciona a classe “active” quando o botão “Open” é clicado.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Quando isto acontece, a classe “active” é anexada às classes pop-up, alterando assim a visibilidade das pop-ups para “visible”. Em outras palavras, a pop-up aparecerá.

Esta segunda instrução remove a classe “ativa” quando o botão “Fechar” é clicado.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Quando isso acontece, a classe “ativa” é removida das classes pop-up, fazendo com que elas revertam ao seu estilo anterior que tem a visibilidade definida para oculta.

Adicionar as duas instruções de jQuery ao seu documento. Se tudo isso for concluído corretamente, você terá uma caixa pop-up modal rudimentar.