neste tutorial, vamos aprender como criar maneiras pop-up com javascript (janelas de diálogo) sem usar uma estrutura de trabalho, como bootstrap, ou Biblioteca de terceiros. Vamos criar tudo a partir do zero, oferecendo um controle completo sobre como funciona e como parece.
Aqui está o show que vamos criar:
1. Comece com a marcação da página
primeiro criará um modal. Para fazer isso, adicionaremos a classe .modal e um ID exclusivo para um contêiner. Em seguida, especificaremos a caixa de diálogo definindo um item .modal-dialog como um elemento secundário direto do .modal. O diálogo conterá o conteúdo do modal. Pode ser qualquer tipo de conteúdo, como texto, imagens, caixas de luz, notificações / alertas de usuários, etc.
“Uma janela de diálogo (ou modal) é um pequeno elemento Interface de usuário (UI) que aparece em primeiro plano em um site, é geralmente ativado como um aviso para que o usuário faça algo “- Adi Purdila
para Abra um modal, precisaremos de qualquer item com o atributo data-open (normalmente button). O valor desse atributo deve ser o ID do modal desejado.
Por padrão, um modal fechará se clicarmos em seus limites ou quando pressionarmos a tecla Esc Mas também podemos fechá-lo se clicarmos em qualquer item com o atributo (geralmente button).
No começo, o modal aparecerá / desaparecerá com um efeito de desvanecimento. Mas temos a capacidade de ajustar o efeito de animação de diálogo usando o atributo data-animation. O valor desse atributo que deve ser adicionado ao .modal pode ser qualquer um dos seguintes valores:
-
slideInOutDown -
slideInOutTop -
slideInOutLeft -
slideInOutRight -
zoomInOut -
rotateInOutDown -
mixInAnimations
Veremos mais de perto estes valores em uma próxima seção.
Por enquanto, vamos nos familiarizar com a marcação que é necessária Para representar um único modal:
<button type="button" class="open-modal" data-open="modal1">...</button><div class="modal"> <div class="modal-dialog"> <header class="modal-header"> ... <button class="close-modal" aria-label="close modal" data-close>✕</button> </header> <section class="modal-content">...</section> <footer class="modal-footer">...</footer> </div></div>
2. Define alguns estilos básicos
com o marcado preparado, vamos configurar alguns Variáveis CSS e nós reiniciaremos os estilos:
:root { --lightgray: #efefef; --blue: steelblue; --white: #fff; --black: rgba(0, 0, 0, 0.8); --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);}* { padding: 0; margin: 0;}button { cursor: pointer; background: transparent; border: none; outline: none; font-size: inherit;}
depois, nos concentramos horizontalmente e conteúdo vertical d E a página. Além disso, vamos dar-lhe alguns estilos para o botão responsável por abrir o modal:
/*CUSTOM VARIABLES HERE*/body { display: flex; align-items: center; justify-content: center; height: 100vh; font: 16px/1.5 sans-serif;}.btn-group { text-align: center;}.open-modal { font-weight: bold; background: var(--blue); color: var(--white); padding: .75rem 1.75rem; margin-bottom: 1rem; border-radius: 5px;}
Neste ponto, vamos focar nossa atenção nos estilos de O modal.
Cada modal terá os seguintes recursos:
- será a tela cheia com uma posição fixa. Isto é, será visto como uma sobreposição que cobre toda a largura e alta da janela.
- terá uma cor de fundo escuro.
- será oculto por padrão.
- A caixa de diálogo será centrada horizontalmente e verticalmente.
/*CUSTOM VARIABLES HERE*/.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--black); cursor: pointer; visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}
A caixa de diálogo terá uma largura máxima e altura. Sua altura será de 80% da altura da janela. Nos casos em que sua altura excede esse valor, uma barra de rolagem vertical aparecerá:
/*CUSTOM VARIABLES HERE*/.modal-dialog { position: relative; max-width: 800px; max-height: 80vh; border-radius: 5px; background: var(--white); overflow: auto; cursor: default;}
Finalmente, vamos definir alguns estilos simples para cada uma das seções de conteúdo :
/*CUSTOM VARIABLES HERE*/.modal-dialog > * { padding: 1rem;}.modal-header,.modal-footer { background: var(--lightgray);}.modal-header { display: flex; align-items: center; justify-content: space-between;}.modal-header .modal-close { font-size: 1.5rem;}.modal p + p { margin-top: 1rem;}
3. Alternando o modal
uma página pode ter mais de um modal . Mas como mencionado acima, todos os modos serão escondidos no começo.
abre o modal
Da mesma forma, uma página pode ter mais de um ativador aberto (itens com o atributo data-open). Cada vez que você clica em um ativador, o modal associado deve ser visível com uma animação aparecendo gradualmente (fade-in). Lembre-se de que o valor do atributo data-open deve corresponder ao ID de um modal.
Aqui está o script que revela um modal:
e classes css relevantes:
.modal { visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}.modal.is-visible { visibility: visible; opacity: 1;}
feche o modal
com a nossa implementação Quando um modal só pode aparecer de cada vez (este código não suporta maneiras aninhadas). Como mencionado na seção de discagem anterior, existem três métodos disponíveis para escondê-lo com um efeito de desvanecimento (fade-out).
Recapitulamos.
Primeiro, clicando no item personalizado Inclui dentro do modal:
const closeEls = document.querySelectorAll("");const isVisible = "is-visible";for (const el of closeEls) { el.addEventListener("click", function() { this.parentElement.parentElement.parentElement.classList.remove(isVisible); });}
segundo, clicando em qualquer lugar fora do modal:
const isVisible = "is-visible";document.addEventListener("click", e => { if (e.target == document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
Neste caso, o modal (sobreposto) ele se comporta como um fechamento gigante botão. Por esta razão, demos a ele cursor: pointer
Por fim, pressionando a tecla Esc
const isVisible = "is-visible";document.addEventListener("keyup", e => { if (e.key == "Escape" && document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
é um bom momento para ver o que criamos até agora:
O modal parece muito bom! Observe que cada vez que clicarmos em um ativador aberto, o modal correspondente é carregado.
Vamos dar outra etapa e examinar algumas idéias para incentivar seu diálogo.
4. Adicionar animações ao
Diálogo à medida que indicamos antes, o comportamento padrão do modal é a aparência gradual (fade-in) e desbotamento gradual (fade-out). Mas há a opção de ajustar o efeito de animação da janela pop-up.
Eu já criei efeitos de animação suficientes que você poderia usar como alternativa ao efeito de desvanecimento. Para fazer isso, você simplesmente tem que passar o atributo para .modal.
Por exemplo, se você quiser O diálogo aparece com uma animação deslizante da esquerda para a direita, você precisará do efeito slideInOutLeft.
por trás das cenas, existem duas regras que atingem essa animação: / p>
/*CUSTOM VARIABLES HERE*/ .modal-dialog { opacity: 0; transform: translateX(-100%); transition: all 0.5s var(--bounceEasing);}.is-visible .modal-dialog { opacity: 1; transform: none; transition-delay: 0.2s;}
Verifique o modal com este tipo de animação aqui:
Você pode verificar o restante das animações, olhando para a guia CSS de o projeto final de demonstração. Dependendo da complexidade das animações, usei transições ou animações CSS para criá-las.
Eu também usei a função cubic-bezier() para ajustar a função de tempo de todas as transições. Se você não gosta do efeito de rebote, ele produz, sinta-se à vontade para alterá-lo para algo mais suave através da variável --bounceEasing CSS.
Olhe para a demonstração final com todos os efeitos Animação aqui:
Conclusão
Isso é tudo, amigos! Durante este tutorial, aprendemos a criar diálogos de maneira vivamente personalizados sem depender de qualquer estrutura front-end.
Espero que tenha gostado do resultado final e que sua criação ajudou você a atualizar suas habilidades frontais. Fim
Esteja presente que não consideramos acessibilidade, por isso, se você quiser melhorar esta demonstração, essa poderia ser a próxima etapa.
Como sempre, obrigado por ler! / p>
mais leituras em janelas pop-up
-
plugins do WordPressmais de 20 dos melhores plugins do WordPress para janelas emergentes e opt-innon blackman
UI designa melhor maneira de usar janelas de diálogo (modals) em seu web designadi purdila
wordpressComo criar janelas pop-up espetaculares no WordPress com element proadi purpardila