当警告框出现时如何使背景变暗，并在关闭警告框时取消背景变暗？

Question

这是我的 JavaScript 代码片段：

reset.addEventListener("click", function(){
    document.querySelector("#body").classList.add("darkenPage");
    myReset();
    alert("Reset Successful!!");
    document.querySelector("#body").classList.remove("darkenPage");
});

而 CSS 部分是：

.darkenPage {
    background: rgba(0, 0, 0, 0.5);
}

我使用的浏览器是Chrome。即使我尝试了在谷歌上找到的这个CSS片段，我的背景也没有变暗：

.darkenPage {
        height: 100%;
    width: 100%;
    position:fixed;
    top: 0px;
    left: 0px;
    background-color: rgb(0, 0, 0);
}

- vighnesh153

Answer 1

尝试一下这个：覆盖默认的alert()函数，并使用相同的类来操纵您的需求。

这样，您只需在需要的地方调用alert：页面就会变暗。

var originalAlert = window.alert;
window.alert = function(args) {
  document.querySelector("html").classList.add("darkenPage");
  setTimeout(function() {
    originalAlert(args);
    document.querySelector("html").classList.remove("darkenPage");
  });

}

body {
  background-color: white;
  margin: 0px;
}

html.darkenPage {
  background-color: black;
}

html.darkenPage body {
  opacity: 0.5;
}

Content<br>Content<br>Content<br><br>
<button onclick="alert('Hello World')">Alert</button>
<br><br><br> Content
<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>

- Jones Joseph

---

有时候它不工作。有时候只能工作一次。但它还是很有信息量的。 - FLICKER

Answer 2

按正确顺序执行所有步骤：

reset.addEventListener("click", function(){
    //darken page
    document.querySelector("#body").classList.add("darkenPage");

    //display alert box - this pauses javascript execution
    alert("Reset Successful!!");

    //lighten page
    document.querySelector("#body").classList.remove("darkenPage");
});

如果这个方法不能正确运行，你可以尝试通过setTimeout延迟弹出警告框来确保CSS先生效。

reset.addEventListener("click", function(){
    //darken page
    document.querySelector("#body").classList.add("darkenPage");

    //make sure the dark page gets rendered before alert is displayed
    setTimeout(function(){
        //display alert box - this pauses javascript execution
        alert("Reset Successful!!");

        //lighten page
        document.querySelector("#body").classList.remove("darkenPage");
    }, 0);
});

- Zammy

---

这个可以工作，但只能一次。点击重置后，它会变暗页面，然后在警告关闭后，它会移除变暗。但是，下一次我点击重置时，它只会显示警告。CSS不适用于第n次点击（n > 1）。我必须刷新页面才能使其再次工作。为什么会发生这种情况？ - vighnesh153

不知道为什么会发生这种情况。我们手头的代码无法为您提供更多帮助。 - Zammy

这是整个代码的codepen 链接。背景不完全按照我的要求变暗，但这不是主要问题。我只想让重置按钮显示并删除样式。 - vighnesh153

我还使用了bootstrap.min.css，如果您想查看所有外部样式。而且文件具有相对路径。 - vighnesh153