javascript - 容器不想用 js 函数模糊

Question

我正在建立一个网站，我想在我点击一个按钮时模糊一个容器。

我尝试用 js 函数在我的容器上添加一个“模糊”类

var vid = document.getElementById("bgvid");
vid.volume = 0.01;
var x = document.getElementById("formregister");
var container = document.getElementById('container');

function hideShow() {
  if (x.style.display === "none") {
    x.style.display = "block";
    container.setAttribute('class', 'blur');
  } else {
    x.style.display = "none";
    container.setAttribute('class', null);
  }
}

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
  font-family: 'Montserrat', sans-serif;
}

.bg,
.bg-filter {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

.bg-filter {
  z-index: -99;
  opacity: 0.2;
  background: -webkit-linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
  background: -moz-linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
  background: -o-linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
  background: linear-gradient(rgba(49, 224, 247, 1) 0%, rgba(90, 77, 184, 1) 100%);
}

.top_vid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top_vid .title {
  font-family: 'Montserrat', sans-serif;
  margin-left: 3%;
  font-size: 3.2em;
  color: #fff;
}

.start {
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  margin-right: 3%;
}

.start span {
  cursor: pointer;
  position: relative;
  transition: 0.5s;
}

.start span:after {
  color: #31E0F7;
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.start:hover span {
  padding-right: 25px;
}

.start:hover span:after {
  opacity: 1;
  right: 0;
}

.registerform {
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px);
}

<div id="container">

  <video autoplay loop poster muted class="bg" id="bgvid">
    <source src="http://cdn-b-east.streamable.com/video/mp4/xoecp.mp4?token=TvBJWgOGquHb07Q5IlkCZA&expires=1558304940" type="video/mp4"></source>
  </video>

  <div class="bg-filter" id="bg-filter"></div>

  <div class="top_vid">
    <h1 class="title">Moodyness</h1>
    <button class="start" onclick="hideShow()"><span>Let's move !</span></button>
  </div>

</div>

<div class="registerform" id="formregister" style="display: none;">

  <form action="#" method="post">
    <input type="email" placeholder="EMAIL" required></input>
    <input type="password" placeholder="PASSWORD" required></input>
    <input type="password" placeholder="REPEAT PASSWORD" required></input>

    <div class="check">
      <label for="checkbox">Acceptez vous les conditions d'utilisation ?</label>
      <input type="checkbox" id="checkbox" required></input>
    </div>

    <input type="submit" value="Okay !"></input>
  </form>

</div>

我希望除了新表单之外的所有内容都被模糊并显示，但它似乎不起作用，在 codepen 中它不会模糊，而在我的电脑中它使整个 body 移动到顶部页面的。

谢谢!

Answer 1

这是你想要的吗？ https://jsfiddle.net/Lrfyowc3/

我首先在 css 中的“模糊”之前添加了一个句点。其次，我将 id="top_vid"添加到顶部文本的 html 中。第三，我为“top_vid”添加了一个变量并将以下内容添加到 javascript:

      vid.className += " blur";
   top_vid.className += " blur";