javascript - innerHTML 的问题 - 无法识别来自 css 的类
问题描述
我正在尝试使用innerHTML显示一个弹出模型(它应该是一个登录表单),我有很多div和它们各自的类,但是我的第一个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>
caixa 的 CSS
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;
conteudo 的 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的类没有。它应该使弹出模型在页面中心显示为蓝色,并且背景的其余部分应更改其颜色
解决方案
您不必在 JS 函数中构建所有表单,因为它会减慢您的代码。你的老师骗你认为将一整套 HTML 代码隐藏到 JS 中并通过addEventListener
参数调用它会更容易。
您可以在您的身体上设置表单位置和样式并将其隐藏,然后onClick
通过“进入”按钮在事件中调用它,就这么简单。我制作了一个片段,这样您就可以看到这是否是您愿意发生的事情,您还可以查看代码并随意将其实施到您的网站中,这里有:
var modal = document.getElementById("hiddenForm");
//Oh desgraça, isso aqui é só pra fechar o Modal mesmo quando clicar do lado de fora
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #333;
filter: brightness(100%);
transition: all 0.2s ease-in-out;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
filter: brightness(50%);
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #500;
}
.container {
padding: 30px;
}
span.pass {
float: right;
padding-top: 16px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #000;
width: 80%;
}
.close {
position: inherit;
float: right;
top: 0;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: animatezoom 0.3s
}
@keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
<h2>Try me</h2>
<button onclick="document.getElementById('hiddenForm').style.display='block'" style="width:auto;">Entrar</button>
<div id="hiddenForm" class="modal">
<form class="modal-content animate" action="#">
<span onclick="document.getElementById('hiddenForm').style.display='none'" class="close" title="Close Modal">×</span>
<div class="container">
<label for="uname"><b>E-mail</b></label>
<input type="text" placeholder="E-mail" name="uname" required>
<label for="psw"><b>Senha</b></label>
<input type="password" placeholder="Senha" name="pass" required>
<button type="button">Entrar</button>
<button type="button">Cadastro</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('hiddenForm').style.display='none'" class="cancelbtn">Cancel</button>
<span class="pass">Forgot your <a href="#">password?</a></span>
</div>
</form>
</div>
推荐阅读
- python - 如何在多个输入上训练 LSTM?
- azure - Azure 应用服务部署失败并出现错误:“凭据”不能为空
- python - 出现在 Python 脚本输出中的 Unix EOF 字符
- python - 使用 seaborn 使用特定标记标记抖动
- azure - Azure DevOps:为什么 DotNetCoreCLI@2 任务不发布 (zip) 我的 Azure Functions 项目?
- octobercms - 在 Octobercms 前端结果不尊重数组顺序
- xml - 使用 Schema 构建 XML 文件
- php - 从 WooCommerce 可下载产品访问可下载数据
- c# - ASP.NET webforms - 将视图状态保存到数据库 - 视图状态验证不起作用
- parallel-processing - 使用 JMS 进行 Spring Batch 并行处理