Question

我正在创建登录模式，并希望内容在水平和垂直方向上居中。我的CSS已将其居中放置在我想要的位置，但是当我添加JavaScript时，它仅处于水平居中位置。我的代码有什么问题？谢谢！

我尝试了flexbox以及我知道的所有其他居中方法。只是没有意义，因为如果我注释掉JavaScript，那么模态内容就是我想要的位置！

// Get the modal
var modal = document.getElementById('login-modal');

// Get the button that opens the modal
var btn = document.getElementById("login");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
  modal.style.display = "none";}
}



#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position:absolute;
top:0;
left:0;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}

.login-content{
border: 10 px solid black;
height:12%;
width:20%;
background-color:white;
display:block;
text-align:center;
}
input[type=text], input[type=password]{
display:block;
margin: 0 auto;
}

Answer 1

当您要最初隐藏某些内容而不考虑CSS中的显示类型时，可以使用style="display: none;"的内联显示属性创建元素。使用HTML或JavaScript的位置取决于您在哪里创建元素。

此后，您可以通过删除元素的element.style.display属性来显示它。元素恢复为CSS中指定的任何显示类型。

要隐藏它，请添加回element.style.display="none";

使用这种方法，模态应始终显示为CSS样式。但是，请勿尝试将其显示类型更改为JavaSript中其他任何地方的none以外的任何内容！

要专门回答这个问题，内联style属性值绝对优先于CSS中提供的规则。

为什么我的JavaScript代码会破坏样式？

1 个答案: