css 模糊弹出窗口的背景

kyvafyod 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(127)

当你点击Forgot your password? Press me时会弹出一个窗口。当它打开时，我希望背景是模糊的。我试图使用filter: blur(20px);，但这模糊了窗口本身，这是我不想要的。

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>

css

来源：https://stackoverflow.com/questions/77737814/blur-background-of-popup-window

2条答案

按热度按时间

2nbm6dog1#

你只需要在一个元素上设置blur过滤器，这个元素是页面其余部分的父元素，但不是你的弹出窗口的父元素。这里我添加了<div id="blurme">...</div>，其中包含主页面内容，作为#field弹出窗口元素的兄弟元素。

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>

赞(0）回复(0）举报 2024-01-09

avkwfej42#

一种更现代的方法是使用<dialog>元素，并在其::backdrop伪元素上添加模糊

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>

赞(0）回复(0）举报 2024-01-09

我来回答

css 模糊弹出窗口的背景

2条答案

相关问题

热门标签

最新问答