This content originally appeared on DEV Community and was authored by Kirey Cazkdnsky
Carai, quem diria, eu solucionei um problema sozinho, não precisei do ChatGPT pra corrigir um erro, usei lógica, foi algo básico, mas eu fiz sozinho
O ChatGPT me deu esse código pra eu criar um modal:
function abrirConfiguracoes() {
document.getElementById('configModal').classList.add('active'); }
function fecharConfiguracoes() {
document.getElementById('configModal').classList.remove('active'); }
Porém eu não tinha nenhum desses elementos no meu código, e ficou mais ou menos assim:
function openConfig() {
document.getElementById('configModal').classList.add('show'); }
function closeConfig() {
document.getElementById('configModal').classList.remove('show'); }
Porém esse código não tava funcionando, e o Modal estava aberto 100% do tempo, então fiz isso:
.show { display: block; }
.hide { display: none;}
E coloquei isso:
<!-- Modal de Configurações -->
<div id="configModal" class="modal hide">
<h2>O que deseja buscar?</h2>
<label><input type="checkbox" checked disabled> Florestas naturais</label>
<label><input type="checkbox" disabled> Cidades</label>
<label><input type="checkbox" disabled> Locais abandonados</label>
<label><input type="checkbox" disabled> Áreas desmatadas</label>
<label><input type="checkbox" disabled> Áreas queimadas</label>
<button onclick="fecharConfiguracoes()">Fechar</button>
</div>
E atualizei o código pra isso:
function openConfig() {
document.getElementById('configModal').classList.add('show');
document.getElementById('configModal').classList.remove('hide'); }
function closeConfig() {
document.getElementById('configModal').classList.remove('show');
document.getElementById('configModal').classList.add('hide'); }
É algo simples.
Mas não é que funcionou? To surpreso.
O Modal abre e fecha sem nenhum problema agora, não há erros, bugs, tá tudo 100% fluido e funcional.
This content originally appeared on DEV Community and was authored by Kirey Cazkdnsky
Kirey Cazkdnsky | Sciencx (2025-04-05T16:28:56+00:00) Nova conquista desbloqueada. Retrieved from https://www.scien.cx/2025/04/05/nova-conquista-desbloqueada/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.