O desafio era criar uma popup sem usar nenhum plugin, apenas as ferramentas disponíveis no tema Divi. Essa popup deveria conter um formulário de contato e aparecer na tela apenas quando o usuário chegasse ao final do conteúdo da home do site, descontando o rodapé, ou seja, o main-content.
Para fazer isso, acrescentei uma seção ao final da home. É importante que a seção esteja no ponto onde a popup deve abrir, caso seja no meio do conteúdo, ela deve estar lá, mas nesse caso era para ser o último conteúdo. Aqui no blog, ela vai aparecer no final do conteúdo deste post. Para a seção não ficar ocupando espaço desnecessário, o preenchimento do topo e da base deve ser de 0px.
Dentro dessa seção acrescentei duas linhas de uma coluna cada. A primeira linha também deve ter preenchimento do topo e da base de 0px. A segunda linha será a popup em questão.
Dentro da primeira linha, é necessário acrescentar um conteúdo vazio. Nesse caso, acrescentei um divisor que nas configurações de visibilidade do conteúdo deve ter o valor “Não” para “Exibir Divisor”. Esse divisor tem como classe css, em configurações avançadas, “ponto-final”.
A segunda linha tem, como configurações de dimensionamento, a largura máxima de 90% e a altura mínima de 25vw. É importante que as dimensões sejam responsivas para que a popup apareça corretamente no celular. Acrescentei um fundo em gradiente azul de acordo com a identidade visual do cliente e ajustei os valores de margem e de preenchimento. Acrescentei uma sombra para a caixa e aumentei os valores da força de desfoque e da força de propagação.
É importante que a linha inteira saia do fluxo normal da página, então a posição deve ser “fixa” com horizontal offset de -100vw. Dessa forma, a linha fica completamente fora da tela. Coloquei, na localização, superior direita, com vertical offset de 5vw e z-index o mais alto possível. Por fim, a classe da linha ficou definida em “popup-home”.
Dentro da linha, tem três módulos. O primeiro é uma blurb com apenas um ícone de um X que será o botão de fechar. Esse módulo de sinopse foi definido com a classe “fechar-popup”. O segundo módulo é o formulário de contato em si. Aqui no blog, eu retirei o endereço de e-mail do formulário, então ele não funciona como contato. Cada campo do formulário tem a largura máxima definida em 25% para que ele caiba todo na mesma linha juntamente com o botão. O terceiro campo tem as seguintes definições de css no elemento principal:
max-width: 25%;
float: left;
clear: none !important;O terceiro módulo da popup é um módulo de código, com CSS e jQuery. Veja abaixo:
<style>
@media (max-width: 767px) {
p.et_pb_contact_field {
max-width: 100% !important;
}
}
.popup-home {
transition: all .4s;
}
.popup-home.mostrar-popup {
right: 0px;
}
</style>
<script>
jQuery(document).ready(function($) {
$('.ponto-final').waypoint(function() {
$('.popup-home').addClass('mostrar-popup');
this.destroy()
}, {offset: 'bottom-in-view'});
$('.fechar-popup').click(function(){
$('.popup-home').removeClass('mostrar-popup');
});
});
</script>A primeira parte do style é para a responsividade do formulário de contato, já que ele foi alterado para ser inline. Depois vem a configuração da transição e da classe “mostrar-popup”. Essa classe é acrescentada à popup com jQuery quando se chega ao waypoint “ponto-final”, que é o divisor. O offset do waypoint poderia ser um número (quantidade de pixels após passar o ponto) ou em porcentagem (50% por exemplo, seria passar 50% do topo). Nesse caso é “bottom-in-view” que quer dizer que a base do elemento entrou em visualização.
O this.destroy() garante que a popup só abra uma vez, senão ela vai abrir a cada vez que passar pelo divisor, tanto ao rolar a página para cima quanto ao rolar para baixo.
A última parte do código é o botão de fechamento da popup. Ao clicar no ícone de X, remove-se a classe mostrar-popup e a linha sai novamente da tela. A popup no celular fica assim:
Um último detalhe: apesar do z-index estar o mais alto possível, o cabeçalho e o rodapé do site ficam em cima da popup. Ao transferi-la aqui para o blog, verifiquei que ela só fica acima do conteúdo do post. Os elementos do post que são do modelo, como os posts relacionados ou a imagem em destaque, ficam acima da popup, então se fosse para colocar em um layout que usasse modelo, o ideal seria que a popup estivesse no rodapé (caso seja para a popup aparecer ao final do conteúdo, a seção poderia ser a primeira do rodapé) ou no modelo de layout (no caso dos posts poderia estar antes ou depois do conteúdo do post). Enfim, dá para aperfeiçoar no caso de outros usos, mas deixo registrado aqui o que o cliente aprovou. E agora é a vez da popup aparecer!
