我无法在打开弹出窗口时禁用背景,我想隐藏或使其成为阴影,但是我不知道如何添加CSS,请提供代码帮助,我是开发中的新手。感谢您的帮助!
<div class="searchbox">
<form>
<input type="text" placeholder="Tìm phòng trọ theo từ khóa" size="25">
<button class="btn" ><i class="fa fa-search"></i></button>
</form>
</div>
<div class="login">
<button type="button" onclick="document.getElementById('loginbox').style.display ='block'">Đăng nhập ngay</button>
</div>
<div id="loginbox">
<img src="images/avatar1.jpg" class="avatar">
<h1>Đăng Nhập</h1>
<form>
<p>Tên đăng nhập</p>
<input type="text" name="" placeholder="Điền tên đăng nhập">
<p>Mật khẩu</p>
<input type="text" name="" placeholder="Mật khẩu">
<input type="submit" name="" value="Đăng nhập">
<a href="Register.html">Chưa có tài khoản ?</a>
<button onclick="button" onclick="document.getElementById('loginbox').style.display ='none'">Close</button>
</form>
</div>
以及此的CSS
#loginbox{
width: 320px;
height: 420px;
background-color: white;
color: #fff;
top: 45%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
display:none;
}
body{
background-image:url(images/background2.png) ;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
height: 100vh;
}
function myfunc(id) {
var element = document.getElementById(id);
if (element) {
var display = element.style.display;
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
}
body{
background:red ;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
height: 100vh;}
#loginbox{
width: 320px;
height: 420px;
background-color: white;
color: #fff;
top: 45%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
display:none;
}
<div class="searchbox">
<form>
<input type="text" placeholder="Tìm phòng trọ theo từ khóa" size="25">
<button class="btn" ><i class="fa fa-search"></i></button>
</form>
</div>
<div class="login">
<button type="button" onclick="myfunc('loginbox')">Đăng nhập ngay</button>
</div>
<div id="loginbox">
<img src="images/avatar1.jpg" class="avatar">
<h1>Đăng Nhập</h1>
<form>
<p>Tên đăng nhập</p>
<input type="text" name="" placeholder="Điền tên đăng nhập">
<p>Mật khẩu</p>
<input type="text" name="" placeholder="Mật khẩu">
<input type="submit" name="" value="Đăng nhập">
<a href="Register.html">Chưa có tài khoản ?</a>
<button onclick="button" onclick="myfunc('loginbox')">Close</button>
</form>
</div>
如果您只想进行切换,请进行更改
onclick="document.getElementById('loginbox').style.display ='none'"
onclick="document.getElementById('loginbox').style.display ='block'"
to
onclick="myfunc('loginbox')"
并将功能添加到javascript
function myfunc(id) {
var element = document.getElementById(id);
if (element) {
var display = element.style.display;
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
}
如果您想在单击按钮后从JavaScript更改背景色,则应使用此代码:
<button onclick='removeBackground()'>Click me!</button>
JavaScript:
function removeBackground() {
document.body.style.backgroundColor = 'transparent';
}