[我想在单击按钮弹出窗口时禁用背景

问题描述 投票:0回答:2

我无法在打开弹出窗口时禁用背景,我想隐藏或使其成为阴影,但是我不知道如何添加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;        
}
javascript html css
2个回答
0
投票

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

0
投票

如果您想在单击按钮后从JavaScript更改背景色,则应使用此代码:

<button onclick='removeBackground()'>Click me!</button>

JavaScript:

function removeBackground() {
document.body.style.backgroundColor = 'transparent';
}
© www.soinside.com 2019 - 2024. All rights reserved.