Html Question posted in
Some basic documentation can be found here.

Html – Blur background of Popup Window

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    A more modern way would be to use <dialog> element and put a blur on its ::backdrop pseudo element

    const dialog = document.getElementById('dialog');
const forgot = document.getElementById('forgot');

forgot.addEventListener('click', () => {
  dialog.showModal()
});
    #content {
  background-color: black;
  padding: 40px;
  color: white;
}

#forgot {
  color: black;
}

#dialog {
  padding: 0;
  &::backdrop {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.1);
    border: none;
  }
}
    <dialog id="dialog">
  <div id="field">
    <div id="content">
      <p>Here you can set your password back</p>
      <form method="dialog">
        <button autofocus>Close</button>
      </form>
    </div>
  </div>
</dialog>

<section>
  <a id="forgot">Forgot your password? Press me</a>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search