Я хочу отключить фон, когда я нажимаю кнопку всплывающее окно

Question

Я не могу отключить фон, когда открываю всплывающее окно, я хочу скрыть или сделать его теневым, но я не знаю, как добавить css, пожалуйста, помогите с моим кодом, я новичок ie в разработке , Спасибо за помощь!

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

Если вы хотите просто переключиться, измените его

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

на

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

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