javascript - 如何在显示警报时调暗背景并在警报关闭时关闭#dim？

Question

这是我的 js 片段:

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);
}

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>