Javascript 背景模糊/弹出框转换（点击）

Question

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>

Answer 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>

Answer 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>

Answer 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.