为什么我的模态内容的背景色不显示？

Question

 // Get the modal let modal = document.getElementById('login-modal'); // Get the button that opens the modal let btn = document.getElementById("login"); // Get the <span> element that closes the modal let span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "flex"; } // When the user clicks on the <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close the modal window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none";} } 

 html, body{ box-sizing:border-box; overflow:hidden; height:100%; } body{ min-height:100%; min-width:100%; background-color:blue; background-size:100% 100%; background-repeat: no-repeat; background-position:center center; position:relative; } .container{ height:100%; width:100%; overflow:hidden; } #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:300px; width:500px; background-color:white; text-align:center; } input[type=text], input[type=password]{ display:block; margin: 0 auto; } 

 <header> <div class="container"> <div id="branding"> <a href="indexresolve.html"><img src="images/lasttry.png" alt="resolvelogo"></a> </div> <nav> <li><a href="indexresolve.html">Home</a></li> <li><a href="howitworks.html">How It Works</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="faq.html">FAQ</a></li> <li><button id="login" class="button">Log In</button></li> <div id="login-modal"> <div id="login-content"> <span class="close">&times;</span> <form> <input type="text" placeholder="username"> <input type="password" placeholder="password"> <button>Log In</button> </form> </div> </div> </nav> </header> 

I have my modal content div ready to go with basic css, but the background color of white doesnt show. I want there to be a 200px by 300px white box for the background of my content.

<div id="login-modal">
<div id="login-content">
<span class="close">&times;</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>


#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:300px;
width:500px;
background-color:white;
text-align:center;
}
input[type=text], input[type=password]{
display:block;
margin: 0 auto;

I thought setting the background color of the modal itself with an rgba would help but still the white box is not there.

Answer 1

do the following change in css

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