Criar um modal simples que aparece e fecha ao clicar no botão.

Olá, galera! Hoje é o penúltimo dia da primeira semana, ou seja, o dia 6 do desafio. O tema de hoje foi criar um modal simples que aparece e fecha ao clicar no botão. Para variar um pouco, fiz de duas maneiras diferentes. Então, vamos começar pelo HTML!

Estrutura HTML

No HTML, criei dois botões: um para abrir o primeiro modal e outro para a segunda abordagem. Além disso, também adicionei o corpo do primeiro modal, que contém um elemento de texto e um botão para fechá-lo

Estilização com CSS

No CSS, configurei o primeiro modal para cobrir toda a tela, mas com display: none, para que ele não apareça inicialmente.

Implementação com JavaScript

Primeiro Modal

O JavaScript para o primeiro modal é bem simples:

let modal = document.getElementById("modal").style;

function Modal() {
    modal.display = "flex";
}

function CloseModal() {
    modal.display = "none";
}

Aqui, apenas manipulei o estilo do modal, criando funções para exibi-lo e escondê-lo.

Segundo Modal

No segundo modal, optei por criá-lo dinamicamente dentro do JavaScript:

function CreateModal(title, description) {
    const modal = document.createElement("div");
    const modalContent = document.createElement("div");
    const modalHeader = document.createElement("div");
    const modalBody = document.createElement("div");
    const closeButton = document.createElement("button");
    
    modal.classList.add("modal");
    modalContent.classList.add("modal-content");
    modalHeader.classList.add("modal-header");

    modalHeader.innerHTML = `<h1>${title}</h1>`;
    modalBody.innerHTML = `<p>${description}</p>`;
    closeButton.innerHTML = "x";
    
    closeButton.addEventListener("click", () => {
        document.body.removeChild(modal);
    });
    
    modalHeader.appendChild(closeButton);
    modalContent.appendChild(modalHeader);
    modalContent.appendChild(modalBody);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);
}

Aqui, criei os elementos HTML via JavaScript, adicionei classes, conteúdo e estrutura. Diferente do primeiro modal, este não utiliza display: none, pois o próprio elemento é removido ao clicar no botão de fechar.

---

O resultado final você pode conferir aqui
link para o repositorio do projeto