Recently, I made the jump from creating fullstack Ruby apps to working with Javascript. Como você já deve saber, Javascript permite aos usuários, ou clientes, interagir com uma página web e dinamicamente renderizar novo conteúdo para o DOM com base na interatividade do Usuário. Em comparação com a codificação em Ruby on Rails (em que cada rerender requer uma atualização de página inteira), a capacidade de redirecionar vários elementos de página com base em interações de usuário com Javascript trouxe minhas habilidades de desenvolvimento frontend a partir de 1994 e para o presente. Com a minha compreensão rudimentar do Javascript, posso agora criar um elemento web interativo que estou ansioso para implementar em meus projetos: caixas de mensagens — ou popups.

um modal, ou caixa de diálogo, é uma caixa de mensagens que aparece no navegador depois de alguma interatividade de usuário especificada. Antes de mergulhar nas especificidades de criar uma caixa modal para o seu site com HTML, CSS e Javascript, vamos primeiro rever os vários tipos de caixas de mensagens que você pode encontrar.

alertas

um alerta é uma caixa de mensagens, normalmente bloqueada no navegador, que requer uma resposta ou interação do Usuário antes que ele possa ser descartado e desaparecer da página. Talvez você queira que o cliente reconheça a informação (Termos de Uso) ou que a página em si esteja confirmando a conclusão de um formulário. No entanto, até que o alerta seja descartado, o cliente não pode interagir com o resto da página.

pop-up

Um pop-up é uma pegajosa (acho que ‘paus’ para a página, não pegajoso como doces) caixa de mensagem que é exibida no navegador que não exigem interação imediata ou atenção. Se um usuário quer que eles desapareçam, eles precisam fechar ou interagir com o popup naquele momento, mas a interatividade do resto da página ainda está funcional. As notificações são um exemplo de um popup.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. O usuário pode interagir com a notificação growl — talvez para descartar a caixa de mensagem cedo, ou para clicar em um botão dentro da notificação — ou pode optar por ignorar e ele irá desaparecer após o temporizador expirar. Como um popup, a notificação growl permite que o cliente continue a interagir com o resto da página. Um exemplo disso é uma notificação de E-mail ou mídia social.

Lightbox/Teatro

Um plugin ou um teatro é uma caixa de mensagem que normalmente aumenta o conteúdo que já estava disponível no navegador de um usuário para o foco sobre ele. Um caso de uso comum é uma imagem, ou Série de imagens exibidas em uma galeria. Quando uma caixa de luz ou teatro é empregado com várias peças de conteúdo, é considerado “bloqueado” quando um usuário pode navegar através do conteúdo associado dentro da própria caixa de luz, em vez de retornar à página original e, em seguida, clicar na próxima imagem da série para ampliar.

Janela pop-over/cartão de visita

Uma das pequenas caixas de mensagem, uma janela pop-over ou um cartão de visita só aparece no ecrã quando o utilizador coloca o ponteiro do seu mouse sobre a área selecionada. Estas caixas de mensagens podem conter instruções ou explicações sobre o botão ou contentor que o Utilizador está a pairar sobre; eles também podem conter uma prévia à informação disponível se o usuário clica em um link.

Modal/Caixa de Diálogo

por último, uma caixa de diálogo modal ou uma caixa de mensagem que permite uma maior interatividade da página sem sair do conteúdo atual no navegador. Uma caixa modal não é bloqueada na tela (i.e., o cliente pode navegar para longe dele sem uma interação necessária), embora seja tipicamente o foco do usuário (com base em seu estilo da caixa). Na maioria dos casos, se um usuário quiser descartar o modal, eles podem simplesmente fechar a caixa com um botão fornecido, ou clicar fora do modal. Um exemplo de um modal é quando um usuário precisa completar um formulário ou fornecer informações específicas para uma consulta de pesquisa, mas você não quer que eles naveguem para outra página.

Implementação de um Modal

para criar e implementar um modal em sua página, há três passos que você tem para concluir a funcionalidade:

1. HTML: marcação para criar o modal elemento
2. CSS: estilo para determinar como o modal parece e aparece na página
3. Javascript: a colocação de ouvintes de eventos para o modal aparece/desaparece dependendo da sua interatividade com o usuário

HTML

Para o mais simples dos modais, precisamos de um botão (ou de qualquer elemento da página que você preferir) que um usuário pode clicar para ativar o modal, o real modal, e é provável que você queira implementar um botão de fechar no modal.

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

No exemplo acima, você pode ver que temos um botão que irá aparecer dentro do nosso HTML, bem como um modal, com três classes de CSS: modalmodal-btn e close-btn. Cada um deles será incluído no CSS abaixo. O primeiro div é o recipiente original que contém todo o modal Com uma classe de modal. Internamente, temos um div que contém o conteúdo para o modal em si: o botão para fechar o modal span e o texto dentro de uma ptag.

Como um aparte rápido, Você também pode implementar cabeçalhos e rodapés em seu modal, simplesmente criando mais divs dentro das classes HTML e CSS adicionais para propósitos de estilo. Por exemplo:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

Para o estilo de cada um dos elementos do modal simples do HTML, precisamos criar o associado classes CSS: .modal.modal-content e .close-btn. Além disso, você pode ver abaixo que também há CSS incluído para criar animação para o modal.

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

nas classes acima, temos estilo para cada um dos elementos que criamos em nosso HTML.

a .modal a classe em si tem atributos que determinam como trata a página por trás do próprio modal: uma largura e altura em comparação com a página por trás da janela, uma cor (este exemplo usa um cinzento semi-opaco) e uma configuração de visibilidade para que possamos alterna-la no nosso Javascript quando um utilizador carregar no botão.

Para a caixa de diálogo real, nós também temos separado do estilo .modal-content: posicionando-o contra o fundo de estilo, uma cor de plano de fundo para a caixa de diálogo propriamente dito, preenchimento, e neste exemplo, há animação incluída para que o modal cai para baixo a partir do topo da página.

além disso, designamos uma classe.close-btn que flutua um ‘x’ para a direita, e com .close-btn:hover, quando o utilizador passa por cima do botão fechar, a cor irá mudar. Para maior clareza, o utilizador pode carregar fora do modal para fechar a janela do mesmo modo que carregar no botão Fechar. Vamos criar um ouvinte de eventos para ambas as opções em nosso Javascript.isto mal coça a superfície de CSS que você poderia implementar por conta própria. Sinta-se livre para ajustar o código acima para melhor atender às suas próprias necessidades.

Javascript

por último, precisamos de escrever algum Javascript a fim de criar a funcionalidade do modal.

let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}

Nós selecionou vários objetos do nosso HTML e atribuído a variáveis: modal-btnmodal si mesmo, e o close-btn. Então, criamos ouvintes de eventos paraonclick eventos. Quando um usuário clica sobre o modal-btn, o estilo de visualização está definido para "block”, mas ao clicar no close-btn ou a janela fora do modal (representado no nosso estilo como o semi-opaco cinza), o estilo de exibição daí em diante, é definido como "none". Isso efetivamente esconde o modal até que eles clicar no modal-btn novamente.

em Geral, a jogar com o DOM com Javascript tem sido incrivelmente gratificante e divertido como um início de codificador. Espero que o código acima irá ajudá-lo a implementar modais e caixas de mensagens por conta própria também. Com alguma pesquisa rápida, Você também pode encontrar mais recursos para ajustar modais e caixas de diálogo para os seus casos de uso.boa sorte e boa codificação!