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

Question

当我打开弹出窗口时，我无法禁用背景，我想隐藏或使其成为阴影，但我不知道如何添加 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;        
}

Answer 1

 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"; } } } function overlayOn(){ document.getElementById('overlay').style.display = 'block'; } function overlayOff(){ document.getElementById('overlay').style.display = 'none'; }

 body{ background-image:url(http://www.jquery-az.com/html/images/banana.jpg); -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; z-index: 2; }.overlay { position:fixed; padding:0; margin:0; top:0; left:0; width: 100%; height: 100%; background:rgba(255,255,255,0.7); z-index: 1; }

 <div class="main"> <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');overlayOn()">Đă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> <div id='overlay' onclick="myfunc('loginbox');overlayOff()" class='overlay' style="display:none;"></div> </body>

如果您只想切换，请更改它

onclick="document.getElementById('loginbox').style.display ='none'"
onclick="document.getElementById('loginbox').style.display ='block'"

至

onclick="myfunc('loginbox')"

并将 function 添加到 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";
        }
    }
}

UPD：为背景添加叠加层

Answer 2

如果要在单击按钮后从 JavaScript 更改背景颜色，则应使用以下代码：

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

JavaScript：

function removeBackground() {
document.body.style.backgroundColor = 'transparent';
}

如果要在单击后隐藏按钮，则应使用：

<button onclick='hideButton()' id='hide'>Hide me!</button>

function hideButton() {
document.getElementById('hide').style.visibility = 'hidden';
}

如果您希望它不占用网页上的任何空间，请为 JavaScript 执行此操作：

function hideButton() {
document.getElementById('hide').style.visibility = 'collapse';
}