Crie uma janela pop-up usando HTML, CSS e JavaScript

Janelas pop-up bem projetadas tornam seu site mais interativo e moderno. Eles podem criar mercados e aumentar as vendas para as empresas.

Você pode criar janelas pop-up com HTML, CSS e JavaScript. Use o guia a seguir para criar e estilizar uma janela pop-up do zero. Isso torna seu site interativo e cria ótimas experiências de usuário.

Escreva HTML para estruturar o conteúdo

Vamos escrever algum código HTML que tenha uma janela modal oculta que aparece quando você clica em um botão. Nesse caso, você exibirá o significado da palavra Olá! A janela pop-up terá um título e algum conteúdo.

Imediatamente você ativa a janela modal, um efeito desfocado é lançado no fundo. Adicione classes às seções que você usará para selecionar o modal posteriormente em JavaScript.

<corpo>
<botãoaula="modal aberto">Olá!botão>
<divaula="modal-conteúdo oculto-modal">
<divaula="cabeçalho modal">
<h3>Significado de Olá!h3>
<botãoaula="modal fechado">×botão>
div>

instagram viewer

<divaula="corpo modal">
<p>Hello é uma saudação em inglês. É usado em
 o início de uma frase como uma introdução, seja pessoalmente ou
 no telefone.p>
div>
div>
<divaula="blur-bg hidden-blur">div>
<roteiroorigem="script.js">roteiro>
corpo>

A página deve aparecer assim:

Você também pode querer investigar o elemento de diálogo HTML se você deseja usar a marcação mais semântica.

Escreva CSS para adicionar estilo

Use CSS para formatar a janela pop-up. Coloque a janela no centro da página da Web contra um fundo preto, para que fique bem visível. Você também estilizará a janela, seu plano de fundo e o tamanho da fonte.

Primeiro, crie um estilo uniforme para toda a página definindo a margem, o preenchimento e a altura da linha. Em seguida, alinhe os elementos do corpo no centro em um fundo traseiro.

* {
margem: 0;
preenchimento: 0;
dimensionamento de caixa: caixa de borda;
altura da linha: 1;
}
corpo {
altura: 100%;
mostrar: flex;
justificar-conteúdo: Centro;
direção flexível: coluna;
itens de alinhamento: Centro;
fundo: #000;
brecha: 30px;
}

Em seguida, estilize o modal aberto botão. Dê a ele uma cor de fundo diferente do restante da página para que se destaque. Além disso, defina a cor da fonte, tamanho, preenchimento e um tempo de transição.

.open-modal {
fundo: #20c997;
cor: #fff;
fronteira: nenhum;
preenchimento: 20px 40px;
tamanho da fonte: 48px;
raio da borda: 100px;
cursor: ponteiro;
transição: todos 00,3s;
contorno: nenhum;
}
.open-modal:ativo {
transformar: traduzirY(-17px);
}

Em seguida, estilize o conteúdo modal que será exibido quando a janela for aberta. Defina um plano de fundo branco, dê a ele uma largura menor que o corpo e adicione preenchimento.

Dê também um z-index, para que apareça na frente do modal aberto botão. Além disso, defina o modal oculto exibir como nenhum, então ele permanece oculto até você acioná-lo.

.modal-content {
fundo: #ccc;
largura: 500px;
preenchimento: 20px;
raio da borda: 10px;
índice z: 99;
}
.modal-header {
mostrar: flex;
justificar-conteúdo: espaço entre;
margem inferior: 16px;
cor: #000;
tamanho da fonte: 30px;
}
.modal-bodyp { 
tamanho da fonte: 22px;
altura da linha: 1.5; 
} 
.hidden-modal { 
mostrar: nenhum; 
}

Em seguida, estilize o modal fechado botão com um fundo transparente e alinhe-o no centro.

.close-modal {
fundo: transparente;
fronteira: nenhum;
mostrar: flex;
itens de alinhamento: Centro;
justificar-conteúdo: Centro;
altura: 20px;
largura: 20px;
tamanho da fonte: 40px;
}
.close-modal:flutuar {
cor: #fa5252;
}

Por fim, estilize o elemento de desfoque que será lançado no plano de fundo quando a janela for aberta. Ele terá altura e largura máximas e um filtro de fundo. Defina o desfoque como nenhum, para que não fique visível até que a janela seja aberta.

.blur-bg {
posição: absoluto;
principal: 0;
esquerda: 0;
altura: 100%;
largura: 100%;
fundo: rgba(0, 0, 0, 0.3);
filtro de pano de fundo: borrão(5px);
}
.hidden-blur {
mostrar: nenhum;
}

Depois de adicionar o CSS, a página deve ficar assim:

Controle o pop-up com código JavaScript

Você usará JavaScript para abrir e fechar a janela modal exibindo-a ou ocultando-a. Adicionar ouvintes de eventos ao botão para acioná-lo para abrir e fechar quando você clicar nele.

Primeiro selecione os elementos relevantes usando as classes CSS que você definiu no HTML:

deixar modalContent = documento.querySelector(".modal-content");
deixar openModal = documento.querySelector(".open-modal");
deixar fecharModal = documento.querySelector(".close-modal");
deixar blurBg = documento.querySelector(".blur-bg");

Adicione um ouvinte de evento ao modal aberto botão para que ele abra a janela quando você clicar nele.

openModal.addEventListener("clique", função () {
 modalContent.classList.remove("modal oculto");
 blurBg.classList.remove("desfoque oculto");
});

Execute as ações opostas para lidar com o fechamento do pop-up, mas, desta vez, envolva-as em uma função nomeada. Isso manipulará o comportamento de vários eventos que podem fazer com que a janela modal seja fechada:

deixar closeModalFunction = função () {
 modalContent.classList.add("modal oculto")
 blurBg.classList.add("desfoque oculto")
}

Adicione ouvintes de eventos para lidar com cliques no plano de fundo ou no botão Fechar e no caso em que o usuário pressiona a tecla Escape.

blurBg.addEventListener("clique", closeModalFunction);
closeModal.addEventListener("clique", closeModalFunction);
documento.addEventListener("keydown", função (evento) {
se (evento.chave "Escapar"
 && !modalContent.classList.contains("escondido")
 ) {
 closeModalFunction();
 }
});

Agora, ao clicar no Olá! botão, o modal aparece. Você pode fechá-lo clicando no botão Cancelar à direita da janela. Veja o código em codepen.io e interagir com o modal:

Usos de janelas pop-up

O principal uso de janelas pop-up/modais no desenvolvimento da Web é trazer o foco para um item específico no site. Uma vez acionado, ele desativa o restante da página, solicitando que o usuário preste atenção nele.

Janelas pop-up animam sua IU. Eles podem alertar e chamar a atenção para informações importantes na página da web para seus usuários. Para remover a janela, o usuário deve executar algum tipo de ação. Desta forma o utilizador consegue interagir com a janela e obter a informação pretendida.