Question

这是我的js代码段：

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

css部分是：

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

我使用的浏览器是Chrome。即使我尝试在Google上找到的以下CSS代码段，背景也不会变暗：

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

如果我做错了，请纠正我。.

[编辑]：这是整个文件夹的github link。无需管理依赖关系。

Answer 1

只需按照正确的顺序执行所有步骤：

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

如果此方法不能正确解决，并且您想确保先应用CSS，则可以尝试将警报延迟setTimeout。

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

Answer 2

尝试一下：覆盖默认的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>

显示警报时如何调暗背景，关闭警报时如何关闭#dim？

2 个答案: