Question

我试图通过使用不透明性来使我的整个身体标签变得模糊。仅当我单击按钮时，此命令才应运行。我的按钮用作显示div的触发器。但是当我这样做时，所有的一切都变得模糊了。

theButton.onclick = function() { 
    document.getElementById('show-form').style.visibility='visible'; 
    document.getElementById('body').style.opacity='0.5'  
}

Answer 1

我认为您只能将不透明度应用到身体背景中，而不是整个身体元素中。尝试下面的代码。

const btn = document.querySelector('button');

const invisible = document.querySelector('#show-form');

function showVisible() {
  invisible.style.visibility = 'visible';
  document.body.classList.add('with-opacity');
}

btn.addEventListener('click', showVisible);

#show-form {
  width: 100%;
  min-height: 70px;
  background: #666;
  color: #fff;
  visibility: hidden;
}

.with-opacity {
  background: rgba(0,0,0,0.3);
}

body, html {
  width: 100%;
  height: 100%;
}

<div id="show-form">Hello World!</div>
<br><br>
<button>Click me</button>

在同一页面上显示div并将不透明度应用于背景

1 个答案: