Implementé una ventana emergente que aparece cuando se presiona un botón y quiero que el fondo se vea borroso cuando el mensaje emergente está en la pantalla. Agregué una función llamada toggle() que se activa/desactiva al hacer clic en el botón:

 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"); }

Código HTML:

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

Y estos son los atributos CSS que he agregado:

 .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); }

donde container es la pantalla completa del sitio web y popup y popup2 son dos ventanas emergentes diferentes. En este momento, cuando se hace clic en el botón, todo el sitio web se ve borroso, incluido el mensaje emergente.

Agradecería cualquier ayuda :) (estoy usando JavaScript)