Modal e Janela de Diálogo | Laboratório de Desenvolvimento Web

🪟

ANTES DE COMEÇAR

O que você vai aprender?

Nesta aula vamos construir o conceito de Modal desde o início. Você não vai apenas copiar um código pronto. A ideia é entender por que cada parte existe e qual é a responsabilidade do HTML, do CSS e do JavaScript.

Ao final da aula você será capaz de criar modais para mensagens, confirmações, formulários, detalhes de registros e outras situações comuns em sistemas web.

💡 Importante: durante a aula, observe sempre a divisão de responsabilidades: HTML estrutura, CSS apresenta e JavaScript controla o comportamento.

SEU APRENDIZADO

Progresso da aula

1 Fundamentos

2 HTML

3 CSS

4 JavaScript

5 Prática

6 Projeto

FUNDAMENTOS

O que é uma janela modal?

Entendendo o conceito antes de escrever código.

Um modal é uma interface que aparece sobre o conteúdo atual da página para apresentar uma informação ou solicitar uma ação.

Quando o modal aparece, normalmente existe uma camada visual entre o usuário e o restante da página. Essa camada é chamada frequentemente de overlay ou fundo de sobreposição.

Sobre esse fundo fica a janela do modal, que contém título, informações, campos de formulário, botões ou outras informações.

Elemento	Responsabilidade
HTML	Cria a estrutura da janela.
CSS	Define posição, tamanho, cores, fundo e aparência.
JavaScript	Controla quando o modal abre e fecha.

💡 Imagine desta maneira: a página continua existindo atrás do modal. O modal simplesmente aparece em uma camada superior.

HTML

Estrutura HTML de um Modal

Criando a estrutura que será transformada em janela.

O HTML não sabe sozinho que determinado elemento é um "modal". Nós criamos uma estrutura utilizando elementos HTML e depois usamos CSS e JavaScript para dar comportamento a essa estrutura.

Uma estrutura simples pode possuir uma camada externa e uma camada interna.

ESTRUTURA BÁSICA HTML

<div class="modal">

  <div class="modal-conteudo">

    <h2>Título do Modal</h2>

    <p>
      Conteúdo da janela.
    </p>

    <button>
      Fechar
    </button>

  </div>

</div>

🔎 Vamos entender cada camada

O primeiro div representa a área externa. É nela que podemos colocar o fundo escuro que cobre a página.

O segundo div representa a janela que contém o conteúdo.

RESULTADO CONCEITUAL ● ESTRUTURA

Janela Modal

Esta caixa representa o conteúdo interno do modal.

CSS

Como colocar o Modal sobre a página?

Entendendo position, fixed, inset e z-index.

Agora temos a estrutura HTML. Mas ainda não temos uma janela sobreposta. Precisamos utilizar CSS para transformar a estrutura em uma camada que ocupa a tela.

1. position: fixed

A propriedade position: fixed permite posicionar um elemento em relação à janela do navegador.

POSICIONAMENTO CSS

.modal {

  position: fixed;

  inset: 0;

}

2. O que significa inset: 0?

A propriedade inset pode ser utilizada para definir simultaneamente as posições superior, direita, inferior e esquerda.

Portanto:

ÁREA COMPLETA CSS

inset: 0;

3. Fundo escuro

Um modal normalmente possui um fundo escurecido para separar visualmente a janela do restante da página.

OVERLAY CSS

background: rgba(0, 0, 0, 0.65);

4. Centralizando a janela

Podemos utilizar Flexbox para colocar o conteúdo exatamente no centro da tela.

CENTRALIZAÇÃO CSS

display: flex;

align-items: center;

justify-content: center;

🎯 Resultado: o elemento externo cobre a tela, enquanto a janela interna fica centralizada.

CSS

A importância do z-index

Fazendo o modal aparecer acima dos outros elementos.

Em uma página real podemos ter menus, imagens, cards, cabeçalhos e outros elementos. O modal precisa aparecer em uma camada superior.

Para isso podemos utilizar z-index.

CAMADA DO MODAL CSS

.modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

}

position Define como o elemento será posicionado.

inset Define os limites da camada.

z-index Controla a ordem das camadas.

JAVASCRIPT

Abrindo e fechando o Modal

Agora vamos dar comportamento à interface.

Até aqui trabalhamos principalmente com estrutura e aparência. Agora entra o JavaScript.

O JavaScript será responsável por dizer:

quando o modal deve aparecer;
quando deve desaparecer;
o que acontece quando o usuário clica;
o que acontece quando pressiona ESC;
como validar informações antes de confirmar uma ação.

ABRIR MODAL JAVASCRIPT

const modal =
  document.getElementById("modal");

function abrirModal() {

  modal.classList.add("aberto");

}

FECHAR MODAL JAVASCRIPT

function fecharModal() {

  modal.classList.remove("aberto");

}

💡 Em aplicações maiores é comum utilizar classes CSS para controlar o estado visual do componente. Neste laboratório vamos utilizar a classe aberto.

INTERAÇÃO

Formas de fechar um Modal

Uma boa interface oferece caminhos claros para sair da janela.

❌

Botão X

Permite que o usuário feche a janela diretamente.

🖱️

Clique fora

O usuário pode clicar no overlay para fechar.

⌨️

Tecla ESC

Uma forma rápida e comum de fechar o modal.

🔘

Botão Cancelar

Muito utilizado em formulários e confirmações.

FECHAR AO CLICAR FORA JAVASCRIPT

modal.addEventListener("click", function(event) {

  if (event.target === modal) {

    fecharModal();

  }

});

FECHAR COM ESC JAVASCRIPT

document.addEventListener("keydown", function(event) {

  if (event.key === "Escape") {

    fecharModal();

  }

});

LABORATÓRIO

Demonstrações práticas

Agora vamos utilizar modais funcionando de verdade.

Chegou a hora de observar o conceito funcionando. Clique nos botões abaixo e perceba como cada modal possui uma finalidade diferente.

LABORATÓRIO INTERATIVO ● ONLINE

👀 Observe: todos os exemplos utilizam o mesmo princípio: uma camada externa + uma janela interna + JavaScript controlando o estado.

UX / INTERFACE

Modal de confirmação

Utilizando modal para evitar ações acidentais.

Imagine um sistema de cadastro. O usuário clica em Excluir.

Se o sistema excluir imediatamente o registro, um clique acidental poderá causar perda de informação.

O modal pode interromper temporariamente o fluxo e perguntar:

EXEMPLO REAL

Deseja realmente excluir este registro?

O usuário precisa tomar uma decisão antes que a operação seja executada.

IDEIA DO FLUXO JAVASCRIPT

1. Usuário clica em "Excluir"

2. Sistema abre o modal

3. Usuário analisa a mensagem

4. Usuário escolhe:

   Cancelar
   ou
   Confirmar

5. Sistema executa a ação somente
   depois da confirmação.

FORMULÁRIOS

Modal com formulário

Criando uma interface de cadastro dentro da janela.

Outra utilização muito comum de modais é apresentar pequenos formulários sem levar o usuário para outra página.

Isso pode ser útil para:

cadastrar um aluno;
adicionar um produto;
editar um registro;
enviar uma mensagem;
alterar informações.

EXEMPLO ● INTERATIVO

ESTRUTURA DO FORMULÁRIO HTML

<form>

  <label for="nome">
    Nome
  </label>

  <input
    type="text"
    id="nome"
    required
  >

  <button type="submit">
    Salvar
  </button>

</form>

BOAS PRÁTICAS

Como criar um bom Modal?

Não basta funcionar: a interface precisa ser clara.

✅

Seja objetivo

O usuário deve entender rapidamente o motivo da janela.

❌

Evite excesso

Não transforme o modal em uma página inteira sem necessidade.

👆

Botões claros

Use textos que expliquem claramente cada ação.

📱

Pense no celular

A janela precisa funcionar em diferentes tamanhos de tela.

⚠️ Uma regra importante: modal não deve ser utilizado simplesmente porque "fica bonito". Ele deve possuir uma finalidade dentro da experiência do usuário.

JAVASCRIPT

Entendendo o estado do Modal

Aberto e fechado são estados diferentes da interface.

Uma forma simples de compreender um modal é pensar que ele possui dois estados principais:

🔴 FECHADO O modal não aparece para o usuário.

🟢 ABERTO O modal aparece sobre o conteúdo da página.

🔄 TRANSIÇÃO O CSS pode criar animações entre os estados.

ESTADO FECHADO CSS

.modal {
  display: none;
}

ESTADO ABERTO CSS

.modal.aberto {
  display: flex;
}

O JavaScript pode simplesmente adicionar ou remover a classe aberto.

Isso mantém uma separação interessante: CSS decide como o estado aparece e JavaScript decide quando o estado muda.

ACESSIBILIDADE

Pensando em todos os usuários

Uma interface profissional também precisa considerar acessibilidade.

Um modal não deve ser pensado apenas visualmente. Usuários podem utilizar teclado, leitores de tela ou dispositivos diferentes.

Por isso é importante oferecer maneiras claras de fechar a janela e utilizar elementos semânticos e identificáveis.

⌨️ Teclado Permitir fechamento com ESC.

🏷️ Título Informar claramente o objetivo da janela.

❌ Fechamento Oferecer uma maneira clara de sair.

♿ Boa prática: acessibilidade deve ser considerada desde o desenvolvimento do componente, e não somente depois que o projeto estiver pronto.

DESAFIO PRÁTICO

Construa seu próprio Modal

Agora é sua vez. Crie uma pequena aplicação que utilize um modal para resolver uma situação real.

Criar a estrutura HTML Criar o overlay Centralizar a janela Criar botão para abrir Criar botão X Fechar com ESC Fechar clicando fora Testar no celular

💡 Sugestão 1

Modal de cadastro.
Modal de login.
Modal de confirmação.

💡 Sugestão 2

Modal de detalhes.
Modal de imagem.
Modal de mensagem.

PROJETO FINAL DA AULA

Modal integrado ao sistema

Desenvolva uma pequena interface de gerenciamento onde o usuário possa cadastrar, visualizar, editar e excluir informações utilizando janelas modais.

01 Cadastro Formulário dentro do modal.

02 Detalhes Exibir informações de um registro.

03 Edição Alterar informações utilizando modal.

04 Exclusão Solicitar confirmação antes da operação.

05 Responsividade Funcionar em diferentes dispositivos.

06 Acessibilidade Permitir interação por teclado.

🎯 Objetivo: demonstrar que você compreendeu a relação entre HTML, CSS e JavaScript na construção de uma interface modal.

AVALIAÇÃO

Exercícios de fixação

Verifique se os principais conceitos foram compreendidos.

Questão 01

O que é um modal?

A) Um banco de dados
B) Uma janela que aparece sobre o conteúdo da página
C) Um servidor web
D) Uma linguagem de programação

Questão 02

Qual tecnologia é responsável principalmente pela estrutura do modal?

A) HTML
B) CSS
C) JavaScript
D) SQL

Questão 03

Qual tecnologia controla o comportamento de abertura e fechamento?

A) HTML
B) CSS
C) JavaScript
D) MySQL

Questão 04

Para que serve o position: fixed no modal?

A) Alterar a cor
B) Fixar o elemento em relação à janela
C) Alterar o tamanho da fonte
D) Criar banco de dados

Questão 05

Qual propriedade pode ajudar a colocar o modal acima de outros elementos?

A) color
B) font-size
C) z-index
D) border

Questão 06

Qual evento JavaScript podemos utilizar para detectar uma tecla pressionada?

A) keydown
B) mousecolor
C) clicktext
D) buttonpress

Questão 07

Qual tecla é frequentemente utilizada para fechar um modal?

A) TAB
B) SHIFT
C) ESC
D) CTRL

Questão 08

Por que um modal de confirmação pode ser útil antes de excluir um registro?

A) Para deixar a página mais pesada
B) Para impedir qualquer ação do usuário
C) Para reduzir a possibilidade de uma ação acidental
D) Para criar uma tabela

📌 Resumo da aula

🪟 Modal é uma janela sobreposta à página.

🧱 HTML cria a estrutura.

🎨 CSS controla aparência e posicionamento.

⚙️ JavaScript controla o comportamento.

📍 position: fixed ajuda a posicionar o overlay.

📐 inset: 0 pode ocupar toda a tela.

🏆 z-index controla a camada.

🖱️ Clique fora pode fechar o modal.

❌ O botão X pode fechar a janela.

⌨️ ESC pode ser utilizado para fechar.

📝 Modais podem conter formulários.

⚠️ Modais podem solicitar confirmação.

🎓

Você chegou ao final da aula!

Agora você conhece a estrutura de uma janela modal, entende o papel do HTML, CSS e JavaScript e consegue construir diferentes tipos de modais.

O próximo passo é aplicar esse conhecimento em um projeto real.