En mi menú superior, tengo varios íconos y cuando presiono el signo más (no lo incluí), quiero que aparezca #addPost. Lo he hecho hasta ahora, pero también quiero que aparezca un filtro alrededor de #addPost, pero solo puedo hacer que aparezca en todo el cuerpo del sitio web. ¿Cómo puedo hacer que el cuerpo del sitio web sea borroso y que #AddPost no sea borroso?
function showPost(){ let add = document.getElementById("addPost") if (add.style.display === "none" ){ add.style.display = "block" add.style.filter = "none" document.body.style.filter = "blur(8px)" } else { add.style.display = "none" document.body.style.filter = "none" } } #addPost{ margin: auto; margin-top: 80px; border: 1px solid rgb(227, 69, 41);; border-radius: 5px; width: 700px; height: 332px; } <div id="addPost" > <div class="title">Create new post <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i> </div> <div class="name"> <input type="Name" placeholder="Username" required> </div> <div class="post"> <textarea placeholder="What's on your mind?" ></textarea> </div> <div> <button type="submit">Post</button> </div> </div>