Modal

├── README.md ├── src ├── javascript │ └── script.js └── css │ └── styles.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Modal com HTML, CSS e JavaScript 2 | 3 | Este projeto demonstra como criar múltiplos modais em uma única página utilizando HTML, CSS e JavaScript. 4 | 5 | ## Instalação 6 | 7 | 1. Clone o repositório ou faça o download dos arquivos. 8 | 2. Abra o arquivo `index.html` no seu navegador. 9 | 10 | ## Visualizar o Projeto 11 | 12 | Você pode visualizar o projeto através deste link: [Visualizar Projeto](https://larissakich.github.io/modal/) 13 | -------------------------------------------------------------------------------- /src/javascript/script.js: -------------------------------------------------------------------------------- 1 | // Seleciona todos os botões que abrem e fecham o modal 2 | const openButtons = document.querySelectorAll('.open-modal'); 3 | const closeButtons = document.querySelectorAll('.close-modal'); 4 | 5 | // Percorre cada botão de abrir e adiciona o evento de click 6 | openButtons.forEach(button => { 7 | button.addEventListener('click', () => { 8 | // Pega o id do modal que o botão abre 9 | const modalId = button.getAttribute('data-modal'); 10 | 11 | // Pega o modal pelo id 12 | const modal = document.getElementById(modalId); 13 | 14 | // Abre o modal 15 | modal.showModal(); 16 | }); 17 | }); 18 | 19 | // Percorre cada botão de fechar e adiciona o evento de click 20 | closeButtons.forEach(button => { 21 | button.addEventListener('click', () => { 22 | // Pega o id do modal que o botão fecha 23 | const modalId = button.getAttribute('data-modal'); 24 | 25 | // Pega o modal pelo id 26 | const modal = document.getElementById(modalId); 27 | 28 | // Fecha o modal 29 | modal.close(); 30 | }); 31 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Modal 13 | 14 | 15 | 16 | 19 | 20 | 21 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Link do Google Fonts */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 3 | 4 | /* Reset CSS */ 5 | *:not(dialog) { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | 12 | /* Corpo da página */ 13 | body { 14 | background-color: #6366F1; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | min-height: 100vh; 19 | } 20 | 21 | /* Botão de abrir modal */ 22 | .open-modal { 23 | background-color: #FFFFFF; 24 | color: #6366F1; 25 | border: none; 26 | border-radius: 8px; 27 | padding: 10px 16px; 28 | font-size: 14px; 29 | cursor: pointer; 30 | } 31 | 32 | /* Fundo do modal */ 33 | dialog::backdrop { 34 | background-color: rgb(0, 0, 0, 0.5); 35 | } 36 | 37 | /* Modal */ 38 | dialog { 39 | border: none; 40 | width: 350px; 41 | border-radius: 24px; 42 | padding: 18px; 43 | } 44 | 45 | /* Cabeçalho do modal */ 46 | .modal-header { 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | margin-bottom: 16px; 51 | } 52 | 53 | /* Título do modal */ 54 | .modal-title { 55 | font-size: 20px; 56 | font-weight: 500; 57 | color: #111928; 58 | } 59 | 60 | /* Botão de fechar modal */ 61 | .close-modal { 62 | cursor: pointer; 63 | border: none; 64 | background-color: transparent; 65 | color: #9CA3AF; 66 | font-size: 18px; 67 | } 68 | 69 | /* Corpo do modal */ 70 | .modal-body { 71 | display: flex; 72 | flex-direction: column; 73 | gap: 16px; 74 | } 75 | 76 | /* Input do formulário */ 77 | .input-group { 78 | display: flex; 79 | flex-direction: column; 80 | gap: 2px; 81 | } 82 | 83 | /* Label do input */ 84 | .input-group label { 85 | font-size: 14px; 86 | font-weight: 500; 87 | color: #111928; 88 | } 89 | 90 | /* Input */ 91 | .input-group input { 92 | border: 1px solid #D1D5DB; 93 | background-color: #F9FAFB; 94 | border-radius: 8px; 95 | padding: 10px 16px; 96 | } 97 | 98 | /* Input com foco */ 99 | .input-group input:focus { 100 | outline: 1px solid #6366f1; 101 | } 102 | 103 | /* Opções de senha */ 104 | .password-options { 105 | display: flex; 106 | justify-content: space-between; 107 | align-items: center; 108 | } 109 | 110 | /* Checkbox de lembrar senha */ 111 | .remember-password { 112 | display: flex; 113 | align-items: center; 114 | gap: 4px; 115 | font-size: 14px; 116 | color: #111928; 117 | } 118 | 119 | /* Link de esqueci a senha */ 120 | .forgot-password { 121 | font-size: 12px; 122 | color: #1C64F2; 123 | text-decoration: none; 124 | } 125 | 126 | /* Botão de login */ 127 | #login_button { 128 | background-color: #6366F1; 129 | color: #FFFFFF; 130 | border: none; 131 | border-radius: 8px; 132 | padding: 10px 16px; 133 | font-size: 14px; 134 | cursor: pointer; 135 | } 136 | 137 | /* Rodapé do modal */ 138 | .register span { 139 | font-size: 14px; 140 | color: #6B7280; 141 | } 142 | 143 | /* Link de registrar */ 144 | .register a { 145 | font-size: 14px; 146 | color: #1C64F2; 147 | text-decoration: none; 148 | } --------------------------------------------------------------------------------