[ANSWERED] html – Javascript background Blur/Popup box transition (On Click)

Question 1

Here, how it works is,

Added a div with id overlay and added the below styles

  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 0, 128, 0.35);
  z-index: 1;
  cursor: pointer;

When the popup is active, it will enable the overlay and on close, it will remove the overlay.

Also added an animation for a cool effect

document.querySelectorAll(".button a").forEach((a) => {
  a.addEventListener("click", toggle);
});
document.querySelectorAll(".popup a:last-child").forEach((a) => {
  a.addEventListener("click", close);
});

function toggle() {
  const popup = document.querySelectorAll('.popup');
  popup.forEach(el => el.classList.remove('active'));
  document.getElementById('overlay').style.display = 'block';
  this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}

function close() {
  document.getElementById('overlay').style.display = 'none';
  this.parentElement.classList.toggle("active"); // .popup
}

.container {
  position: relative;
}

.box {
  border: 3px solid;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Glacial Indifference", sans-serif;
  font-size: 30px;
  padding: 10px;
  border-radius: 5px;
  border-color: #FFFFFF;
}

.popup {
  display: none;
  position: absolute;
  width: 300px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  background: #efefef;
  padding: 20px;
}

.active {
  display: block;
  left: 45%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
  z-index: 99;
  transition: .5s;
  animation: fade_in_show 0.5s
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 0, 128, 0.35);
  z-index: 1;
  cursor: pointer;
}

@keyframes fade_in_show {
  0% {
    opacity: 0;
    transform: scale(0)
  }
  100% {
    opacity: 1;
    transform: scale(1)
  }
}

<div class="container">
  <div id="overlay"></div>
  <div class="box button">
    <a href="#">OPEN1</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video1.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">OPEN2</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video2.mov" controls></video>
    <p>
      content
    </p>

    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON3</a>
  </div>
  <div class="popup">
    <h2>HAEADER3</h2>
    <video src="video3.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON</a>
  </div>
  <div class="popup">
    <h2>HEADER4</h2>
    <video src="video4.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>
</div>

Question 2

Change your toggle() function to just open().
Instead of toggling your classes, just remove the .active class from all buttons and then add it to the box corresponding to the button which was clicked. This way you can add the background blur in the open() function and remove it in close().

I’d also suggest using a single box for all your popups and just changing out the video source and <h2> text according to which button was clicked. (Maybe store that info in data- attributes.) That way you can easily position it below the buttons and still access the other buttons when it’s open.

document.querySelectorAll(".button a").forEach((a) => {
  a.addEventListener("click", open);
});
document.querySelectorAll(".popup a:last-child").forEach((a) => {
  a.addEventListener("click", close);
});

function open() {
  document.querySelectorAll(".button a").forEach((a) => {
    a.parentElement.nextElementSibling.classList.remove("active");
  });
  this.parentElement.nextElementSibling.classList.add("active");
  //popup is sibling of a's parent element
  document.querySelector('.background').classList.add('blurred');
  
}

function close() {
  this.parentElement.classList.remove("active"); // .popup
  document.querySelector('.background').classList.remove('blurred');
}

body {
  margin: 0;
}
.background {
  background-image: url(https://live.staticflickr.com/1618/23872051484_6f199fa269_b.jpg);
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding: 2em;
  z-index: 0;
  position: absolute;
  top: 0;
}
.container {
  z-index: 1;
  position: relative;
}
.box {
  border: 1px solid;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Glacial Indifference", sans-serif;
  font-size: 30px;
  padding: 10px;
  border-radius: 5px;
  border-color: #FFFFFF;
  background-color: rgba(255,255,255,0.5);
  margin: 10px auto;
  width: 50%;
}

.popup {
  display: none;
  visibility: hidden;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  background: #A6A6A6;
}

.active {
  display: block;
  top: 50%;
  visibility: visible;
  left: 50%;
}

.blurred {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

<div class="container">
  <div class="box button">
    <a href="#">OPEN1</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video1.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">OPEN2</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video2.mov" controls></video>
    <p>
      content
    </p>

    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON3</a>
  </div>
  <div class="popup">
    <h2>HAEADER3</h2>
    <video src="video3.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON</a>
  </div>
  <div class="popup">
    <h2>HEADER4</h2>
    <video src="video4.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>
</div>
<div class="background"></div>

Question 3

You can use css to blur the background.

filter: blur(3px);

To close popup, use javascript:

document.onclick = close;

where close is the function containing code to close the popup.

Question 4

I currently have 4 buttons set up that open 4 different popups when they’re clicked. How could I add on to this in my code so that once each of the buttons are clicked, the background blurs, and the popup appears? Also, how could I amend my code so that when another button is clicked when a popup is open, the popup closes and the new, corresponding popup to that button opens?

document.querySelectorAll(".button a").forEach((a) => {
  a.addEventListener("click", toggle);
});
document.querySelectorAll(".popup a:last-child").forEach((a) => {
  a.addEventListener("click", close);
});

function toggle() {
  this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}

function close() {
  this.parentElement.classList.toggle("active"); // .popup
}

.box {
  border: 3px solid;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Glacial Indifference", sans-serif;
  font-size: 30px;
  padding: 10px;
  border-radius: 5px;
  border-color: #FFFFFF;
}

.popup {
  display: none;
  visibility: hidden;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  background: #A6A6A6;
}

.active {
  display: block;
  top: 50%;
  visibility: visible;
  left: 50%;
}

<div class="container">
  <div class="box button">
    <a href="#">OPEN1</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video1.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">OPEN2</a>
  </div>
  <div class="popup">
    <h2>HEADER</h2>
    <video src="video2.mov" controls></video>
    <p>
      content
    </p>

    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON3</a>
  </div>
  <div class="popup">
    <h2>HAEADER3</h2>
    <video src="video3.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>

  <div class="box button">
    <a href="#">BUTTON</a>
  </div>
  <div class="popup">
    <h2>HEADER4</h2>
    <video src="video4.mov" controls></video>
    <p>
      content
    </p>
    <a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
  </div>
</div>

Bollate

[ANSWERED] html – Javascript background Blur/Popup box transition (On Click)

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

By

Related Post

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

[ANSWERED] python – Extract text from a class in HTML using CSS language

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate