How can I blur only the background behind popup?-CodePudding

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  id="blur">
        <div class = "col-8" style = "display: flex;">
            <div class = "container-buttons">
                <div class = "canvas-menu">
                     <ul>
                         <li><button id="clear-button"  onclick="toggle(); displayPopup();"><span style="color: black;">
                                    <i > Clear</i>
                                </span></button></li>
                                <!-- Content popoup -->
                                <div  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  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)

CodePudding user response：

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

CodePudding user response：

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.