Как затемнить фон, когда отображается предупреждение, и отключить #dim, когда предупреждение закрыто?

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.Мой фон не становится темнее, даже если я попробую этот фрагмент CSS, который я нашел в Google:

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

Пожалуйста, исправьте меня, если я делаю это неправильно ..

[ПРАВИТЬ]: Вот ссылка github на всю папку.Нет необходимости управлять зависимостями.

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>

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

, если это не работает должным образом, и вы хотите убедиться, что 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);
});