Blur background of Popup Window

December 31, 2023

When you click on Forgot your password? Press me a popup window opens. When it opens, I want the background to be blurred. I tried to use filter: blur(20px); but that blurs the window itself which I don’t want.

let forgotField = document.getElementById('field');
let forgot = document.getElementById('forgot');
    forgot.addEventListener('click', () => {
        forgotField.style.display = 'block';
    });

#field {
    display: none;
    position: absolute; 
    top: 80px;
    right:0;
    left:0;
    margin: auto;
    width: 300px;
}
#content {
    background-color: black;
    padding: 40px;
    color: white;
}

#forgot {
    color: black;
}

<body id="login-section">
    <section>
        <a id="forgot">Forgot your password? Press me</a>
    </section>
    
    <div id="field">
        <div id="content">
            <p>Here you can set your password back</p>
        </div>
    </div>
    
</body>

>Solution :

You just have to set the blur filter on an element that is a parent of the rest of the page, but not of your popup. Here I added <div id="blurme">...</div>, with the main page content inside, as a sibling to the #field popup element.

let forgotField = document.getElementById('field');
let forgot = document.getElementById('forgot');
let blurElement = document.getElementById("blurme")

forgot.addEventListener('click', () => {
  forgotField.style.display = 'block';
  blurElement.style.filter = "blur(5px)"
});

#field {
  display: none;
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  margin: auto;
  width: 300px;
}

#content {
  background-color: black;
  padding: 40px;
  color: white;
}

#forgot {
  color: black;
}

<body>
  <div id="blurme">
    <section>
      <a id="forgot">Forgot your password? Press me</a>
    </section>
  </div>
  <div id="field">
    <div id="content">
      <p>Here you can set your password back</p>
    </div>
  </div>
</body>