Criar Caixas Modais Responsivas

Introdução

Neste projeto, você aprenderá como criar um componente de caixa modal que pode ser exibido e ocultado em uma página web. Caixas modais são comumente usadas em aplicações web para exibir conteúdo adicional ou formulários sem navegar para fora da página atual.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a estrutura HTML para uma caixa modal
• Como implementar a funcionalidade para mostrar e ocultar a caixa modal
• Como lidar com o event bubbling (propagação de eventos) para evitar que a caixa modal seja exibida novamente após ser ocultada

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma caixa modal usando HTML, CSS e JavaScript
• Usar funções JavaScript para controlar a visibilidade da caixa modal
• Prevenir o event bubbling (propagação de eventos) para garantir que a caixa modal se comporte como esperado

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Funcionalidade de Mostrar e Ocultar

Nesta etapa, você aprenderá como implementar a funcionalidade para mostrar e ocultar a caixa modal.

1. Localize a seção <script> na parte inferior do arquivo index.html.
2. Na seção <script>, você encontrará o seguinte código:

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. Entenda o propósito de cada função:

   • handleClick(e): Esta função é chamada quando o botão "Sign Up Now" é clicado. Ela define a propriedade display da caixa modal para 'block', o que torna a caixa modal visível.
   • handleOk(e): Esta função é chamada quando o botão "X" de fechar ou o botão "OK" dentro da caixa modal é clicado. Ela define a propriedade display da caixa modal para 'none', o que oculta a caixa modal.

4. A linha event.stopPropagation() em ambas as funções é usada para evitar que o evento de clique se propague para os elementos pai, o que poderia fazer com que a caixa modal fosse mostrada novamente após ser ocultada.

Testar a Funcionalidade

1. Salve o arquivo index.html.
2. Atualize a página web no seu navegador.
3. Clique no botão "Sign Up Now" para ver a caixa modal aparecer.
4. Clique no botão "X" de fechar ou no botão "OK" dentro da caixa modal para ver a caixa modal desaparecer. O efeito final deve ser o seguinte:

Parabéns! Você implementou com sucesso a funcionalidade de mostrar e ocultar para a caixa modal.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.