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)