WDD 231 | S04 - Atividades de Aprendizagem: Modais

S04 - Atividades de Aprendizagem: Modais HTML

Visão Geral

Um modal é um elemento de interface do usuário em HTML usado para exibir informações de qualificação ou solicitação. Ele geralmente é usado fora do fluxo normal de uma página ou aplicação, servindo como um recurso crítico para gerenciar informações. Os modais são usados para exibir conteúdo em uma camada sobre a janela visível. São conhecidas como caixas de diálogo, janelas de mensagens ou de alertas ao usuário.

Neste módulo, você aprenderá como usar, programar e estilizar um modal em HTML.

Preparação

Um diálogo modal é criado usando o elemento dialog. O elemento dialog é uma maneira de criar caixas de diálogo modais. É um elemento de nível de bloco, que pode ser estilizado com CSS e manipulado com JavaScript.

Para criar uma caixa de diálogo modal, você precisa usar o elemento dialog e usar os métodos showModal() e close() para controlar a visibilidade da caixa de diálogo.

O exemplo abaixo mostra como criar uma caixa de diálogo modal usando o elemento dialog:
```
<dialog id="meuModal">
  <h2>Diálogo Modal</h2>
  <p>Este é um diálogo modal.</p>
  <button id="fecharModal">Fechar</button>
</dialog>
```
Neste exemplo, o elemento dialog é usado para criar uma caixa de diálogo modal com um título e um botão "fechar". O atributo id é usado para identificar o diálogo para que ele possa ser manipulado com JavaScript.

Este elemento de diálogo só ficará visível depois que o método showModal() for chamado no JavaScript. Então não se preocupe se você estiver criando uma página de teste e começar com este HTML, mas não ver nada.
Para estilizar a caixa de diálogo modal, você pode usar CSS para definir a largura, a altura, a cor de fundo e outras propriedades do elemento dialog. Você também pode usar o pseudoelemento ::backdrop para estilizar o plano de fundo da caixa de diálogo modal.

O exemplo abaixo mostra como estilizar uma caixa de diálogo modal usando CSS:
```
dialog {
  width: 400px;
  height: 300px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  padding: 20px;
}
::backdrop {
  background-color: rgb(0 0 0 / 50%);
}
```
Neste exemplo, o elemento dialog é estilizado com largura e altura, cor de fundo branca, borda preta e sombra de caixa. O pseudoelemento ::backdrop é usado para estilizar o plano de fundo do diálogo modal com uma cor preta semitransparente.
Para manipular a caixa de diálogo modal com JavaScript, use os métodos showModal() e close() para exibir e ocultar o diálogo. Você também pode usar o método addEventListener() para adicionar receptores de eventos à caixa de diálogo modal e seus elementos.

O exemplo abaixo mostra como controlar uma caixa de diálogo modal usando JavaScript:
```
const modal = document.getElementById('meuModal');
const fecharModal = document.getElementById('fecharModal');
modal.showModal(); // exibe a caixa de diálogo modal imediatamente.
// Normalmente, o ideal é aguardar uma ação do usuário para mostrar a caixa de diálogo modal
closeModal.addEventListener('click', () => {
  modal.close();
});
```
Neste exemplo, o método showModal() é usado para exibir a caixa de diálogo modal, e o método close() é usado para ocultá-la quando o botão "fechar" é clicado. O método addEventListener() é usado para adicionar um receptor de evento de clique ao botão "fechar".
O seguinte projeto CodePen demonstra duas maneiras de utilizar diálogos modais
1. O primeiro exemplo usa o elemento dialog com suporte a JavaScript, conforme demonstrado nos exemplos de código acima.
2. O segundo exemplo usa o recurso dialog popover como uma forma alternativa de mostrar sobreposições ou pop-ups em uma página. Não é necessário JavaScript no segundo exemplo. Basta usar o atributo HTML popovertarget no botão "Inscrever-se" para mostrar a caixa de diálogo e popovertargetaction="hide" no botão ❌ para fechar a caixa de diálogo.
Exemplo de Código: Modais usando dialog e backdrop (Exemplo usando uma dialog HTML, pseudoclasse modal e pseudoelemento backdrop).

Instruções da Atividade

Usando sua página inicial do curso, habilite o comportamento modal respondendo aos usuários que clicam em um cartão/botão do curso e exibindo detalhes sobre ele.

A animação a seguir é um exemplo da ação e do efeito de exibição.

HTML

Abra sua página inicial do curso.
Adicione um elemento dialog vazio.

Avalie Seu Conhecimento – Exemplo

<dialog id="infos-do-curso"></dialog>

CSS

Use padrões de estilo que você já desenvolveu e lembre-se de que qualquer CSS adicional deve estar alinhado com o esquema geral do seu design.

Use dialog para estilizar o contêiner modal.

Nota: O seletor CSS :modal não funcionará, pois :modal não é uma pseudoclasse reconhecida pelo CSS.
É recomendável que você estilize dialog ou atribua um id ou classe (class) a dialog e use esse seletor.
Use ::backdrop no modal para alterar o fundo.
Defina o estilo do botão (button) de fechar padrão do elemento dialog.

Avalie Seu Conhecimento – Exemplo

dialog {
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: .25rem;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 0 3rem #777;
  width: 90%;
  max-width: 600px;
}

::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

dialog button {
  position: absolute;
  top: 23px;
  right: 23px;
  padding: .5rem 1rem;
  border: 1px solid rgb(0 0 0 / 10%);
}

JavaScript

Escreva uma função para exibir o modal.

Adicione o seguinte conteúdo à exibição do modal:

Botão que fechará o modal.
Receptor de eventos para fechar o modal quando o usuário clica fora do modal.
Matéria e número
Título
Créditos
Descrição
Certificado
Arquitetura Tecnológica

Avalie Seu Conhecimento – Exemplo

Este exemplo pressupõe que você declarou e inicializou a variável infosDoCurso para receber o elemento detail HTML.

function exibirInfosDoCurso(curso) {
  infosDoCurso.innerHTML = '';
  infosDoCurso.innerHTML = `
    <button id="fecharModal">❌</button>
    <h2>${curso.materia} ${curso.numero}</h2>
    <h3>${curso.nome}</h3>
    <p><strong>Créditos</strong>: ${curso.creditos}</p>
    <p><strong>Certificado</strong>: ${curso.certificado}</p>
    <p>${curso.descricao}</p>
    <p><strong>Tecnologias</strong>: ${course.tecnologia.join(', ')}</p>
  `;
  infosDoCurso.showModal();
  
  closeModal.addEventListener("click", () => {
    infosDoCurso.close();
  });
}

Adicione um receptor de evento "click" à construção do contêiner do curso (dentro do loop que cria cada contêiner do curso). Este gatilho chamará a nova função de exibição, passando as informações do curso atual.
Avalie Seu Conhecimento
```
courseDiv.addEventListener('click', () => {
  exibirInfosDoCurso(curso);
});
```

Vídeos de Demonstração de Desenvolvimento de Código

Para quem prefere aprender assistindo, temos um laboratório de vídeo sobre diálogos modais. O primeiro vídeo aborda a construção de um único modal. O segundo se baseia no primeiro e mostra como reutilizar uma caixa de diálogo para vários pop-ups. O terceiro mostra como criar modais a partir de um arquivo JSON, além de incluir módulos JavaScript com import/export. Essa série de vídeos ajudará você a concluir a tarefa sobre Diálogo Modal desta semana.

Os laboratórios foram criados para que você possa acompanhar e aprender. Você precisará pausar as instruções em vídeo enquanto desenvolve o código do seu próprio projeto.

Baixe o arquivo zip com os arquivos iniciais do primeiro vídeo e o descompacte em uma pasta do seu computador.

Assista ao vídeo Diálogo Modal Parte 1: Exemplo de Diálogo Único

Assista ao vídeo Diálogo Modal Parte 2: Diálogo Reutilizável

Baixe o arquivo zip com os arquivos iniciais e dados dos templos e o descompacte em uma pasta do seu computador.

Assista ao vídeo Diálogo Modal Parte 3: Diálogo com Script e Dados JSON do Templo A

Assista ao vídeo Diálogo Modal Parte 4: Diálogo com Script e Dados JSON do Templo B

Recursos Opcionais

Elemento dialog HTML – MDN