// 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">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
我有我的模式内容的div准备去与基本的CSS,但白犯规秀的背景颜色。我希望这是我的内容的背景为200px x 300像素的白色盒子。
<div id="login-modal">
<div id="login-content">
<span class="close">×</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会帮助,但仍是白盒是不存在的。
做在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;
}