Я пытаюсь отобразить всплывающую модель (это должна быть форма входа в систему), используя innerHTML , у меня есть много divs с соответствующими им классами, но мой первый * Класс 1005 * div по какой-то причине не распознается.
Прежде чем я попытался сделать это всплывающее окно, используя это:
document.querySelector('.caixa-entrar').style.display = "flex";
Это сработало, но у меня было так много проблем с закрытием этих всплывающих окон. Мой учитель предложил использовать innerHTML , потому что он сказал, что это проще. По крайней мере, он показал мне ...
Это моё тело:
<header id="menu">
<button id="cadastrar" class="button-flex-son">Cadastrar</button>
<button id="entrar" class="button-flex-son">Entrar</button>
</header>
<div></div>
CSS Caixa
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
CSS контудо
height: 300px;
width: 500px;
background-color: #3E94D1;
text-align: center;
padding: 20px;
position: relative;
border-radius: 4px;
Мой JS-скрипт
const caixa = document.querySelector('div')
document.getElementById('entrar').addEventListener("click", ()=>{
caixa.innerHTML =
'<div class="caixa">' +
'<div class="conteudo">' +
'<div class="close">+</div>' +
//Insira o coisa de imagem aqui depois, arrombado
'<form class="forms" action="">' +
'<input type="email" name="email" placeholder="E-mail" class="inputao">' +
'<input type="password" name="senha" placeholder="Senha" class="inputao">' +
'<button type="submit" class="butao">Entrar</button>' +
'<button type="submit" id="cadastro-butao" class="butao">Cadastro</button>' +
'</form>' +
'</div>' +
'</div>'
});
Вся эта работа, но первый класс div не делает. предполагалось, что всплывающая модель будет отображаться синим цветом в центре страницы, а остальной фон должен изменить свой цвет