1

I implemented a popup that appears when a button is pressed, and want the background to be blurred when the popup message is on the screen. I've added a function called toggle() which activates/deactivates when clicking on the button:

function toggle() {
  var blur = document.getElementById('blur');
  blur.classList.toggle("active");
  var popup = document.getElementById('popup');
  popup.classList.toggle("active");
  var popup2 = document.getElementById('popup2');
  popup2.classList.toggle("active");
}

HTML code:

<div class="container" id="blur">
        <div class = "col-8" style = "display: flex;">
            <div class = "container-buttons">
                <div class = "canvas-menu">
                     <ul>
                         <li><button id="clear-button" class="btn" onclick="toggle(); displayPopup();"><span style="color: black;">
                                    <i class="fa-solid fa-circle-xmark"> Clear</i>
                                </span></button></li>
                                <!-- Content popoup -->
                                <div class="popup" id="popup">
                                    <p>Are you sure you want to delete blocks?</p>
                                    <button id="no-btn" onclick="toggle(); closePopup()">No</button>
                                    <button id="yes-btn" onclick="toggle(); closePopup(); clearAll();">Yes</button>
                                </div>
                                <div class="popup" id="popup2">
                                    <p>There are no blocks to clear :(</p>
                                    <button id="back-btn" onclick="toggle(); closePopup()">Go back</button>
                                </div>

And these are the CSS attributes I've added:

.container#blur.active {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

#popup.active, #popup2.active {
  pointer-events: all;
  filter: none;
}

.display-popup {
  visibility: visible;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0px);
}

where container is the whole website screen and popup and popup2 are two different popups. Right now, when the button is clicked, the whole website is blurred including the popup message.

I'd appreciate any help :) (I'm using JavaScript)

Rhubarb
  • 11
  • 2
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter – gre_gor May 28 '22 at 10:19
  • 1
    Does this answer your question? [How to use CSS (and JavaScript?) to create a blurred, "frosted" background?](https://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background) – gre_gor May 28 '22 at 10:28

2 Answers2

0

I fixed it! I just had to take the popup HTML code out of the HTML container scope and it works perfectly now.

Rhubarb
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 28 '22 at 13:08
-1

The important thing to remember about CSS is that it cascades; so if your popup is a child of the blur element, it will have blur applied to it. Try changing your markup to ensure the popup is not a child of the blur item and has a higher z-index too.

Ryan M
  • 18,333
  • 31
  • 67
  • 74
willgardner
  • 79
  • 4