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

1

Этот мой 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);
}

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

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

Теги:

2 ответа

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>
Поделиться
  • 0
    Оно работает. Большое спасибо.
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);
});
Поделиться
  • 0
    Это работает, но только один раз. После нажатия кнопки сброса она затемняет страницу, а затем, после того как предупреждение закрывается, удаляет затемнение. Но в следующий раз, когда я нажимаю кнопку сброса, он просто показывает предупреждение. CSS не применяется при n-м нажатии (n> 1). Я должен обновить страницу, чтобы она снова заработала. Почему это происходит?
  • 0
    Не знаю, почему это происходит. Не могу помочь вам больше с кодом, который мы получили здесь.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню