Контейнер не хочет размыть с помощью функции js - PullRequest
Новая
       14

Контейнер не хочет размыть с помощью функции js

0 голосов
/ 19 мая 2019

Я настраиваю веб-сайт и хочу размыть контейнер, когда нажимаю на кнопку.

Я пытался добавить класс «размытия» в свой контейнер с помощью функции 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>

Я хочу, чтобы все, кроме новой формы, было размыто, а форма отображалась, но, похоже, она не работает, в коде ручки она не размыта, а в моем компьютере это заставляет все тело двигаться вверх страницы.

Спасибо тебе!

Ответы [ 3 ]

0 голосов
/ 20 мая 2019

хорошо, я нашел это в CSS. Смени размытие на .blur и напиши z-index: -100 и запусти

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px); 
  z-index:-100
}
0 голосов
/ 20 мая 2019

Это то, что вы хотите? https://jsfiddle.net/Lrfyowc3/

Я впервые добавил точку перед "размытием" в css. Во-вторых, я добавил id = "top_vid" в HTML для текста в верхней части. В-третьих, я добавил переменную для "top_vid" и добавил следующее в javascript: 

      vid.className += " blur";
   top_vid.className += " blur";
0 голосов
/ 19 мая 2019

Вы можете добавить или удалить класс, используя методы classList.add () и classList.remove ().

Ссылка на classList

И еще одна деталь, в вашем css вы забыли добавить «.» до размытия, поэтому вы выбираете для тега размытие, а не размытие класса, поэтому вы должны изменить на следующее: 

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

Чтобы добавить класс размытия 

vid.classList.add('blur');

Чтобы удалить класс размытия 

vid.classList.remove('blur');
...