Básicamente, estoy tratando de implementar una ventana emergente que difumina el fondo y hace que el usuario no pueda tocar los botones y otros componentes en el fondo.
Puede deshabilitar todo el div usando css.
#div-id{ pointer-events: none; } Esto deshabilitará todos los elementos dentro del div. Si quieres el efecto de desenfoque puedes agregar opacity: 0.2; al div css.
Puede agregar esta clase en su contenedor de elementos principal para desenfocar todo el fondo
.blured { filter: blur(2px); -webkit-filter: blur(2px); } Y agregue pointer-events: none; en su modal o ventana emergente
Al usar la propiedad backdrop-filter css y pointer-events puede lograr lo que necesita ... vea el ejemplo a continuación
* { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem; } body { margin: 0; padding: 0; } .disabled{ pointer-events: none; color : grey; } .modal { position: fixed; inset: 0; isolation: isolate; background-color: rgba(19, 128, 119, 0.5); display: flex; align-items: center; justify-content: center; } .popup { position: absolute; z-index: 1; width: 400px; background-color: black; color: white; padding: 1rem; } .blur{ position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(0.2rem); } <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorum illo, non incidunt earum natus neque architecto a autem maxime voluptatibus tempora minima, provident expedita quidem cumque ab. Error, tenetur? </div> <div class="modal"> <div class="blur"></div> <div class="popup"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quam architecto minima nihil aliquid quis unde illo mollitia iure. Quia. <br /> <br /> <br /> <a href="#" class="disabled"> I am a disabled link ! </a> </div> </div>Referencias:pointer-events y backdrop-filter .
Nota: Recuerde también que usar eventos de puntero no significa que no pueda usar el teclado para enfocar. Para evitar el enfoque de la pestaña del teclado, es posible que deba usar el atributo tabindex en el enlace