On my top menu, I have multiple Icons and when pressed on the plus on (I didn't include it) I want #addPost to appear. I have done this so far but I also want a filter surrounding #addPost to appear with it but I can only make it appear on the whole body of the website. How can I make the body of the website blurry and #AddPost not blurry?
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>