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

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>

我的模态内容 div 已准备好与基本的 css 一起使用，但没有显示白色的背景颜色。我希望有一个 200 x 300 像素的白框作为我的内容背景。

<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;

我认为使用 rgba 设置模态本身的背景颜色会有所帮助，但仍然没有白框。

Answer 1

在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;
}