What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Question

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Here's the JavaScript snippet I'm using:

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

And this is the corresponding CSS:

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

Despite trying a CSS snippet I found online, the background doesn't get darker. The browser I'm using is Chrome.

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

javascript html css

Answer 1

Answer №1

Why not give this a shot: Modify the default alert() function and utilize the same classes to customize it as per your needs.

This way, you can easily trigger the alert wherever required, causing the page to dim.

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>

Answer 2

Why not give this a shot: Modify the default alert() function and utilize the same classes to customize it as per your needs.

This way, you can easily trigger the alert wherever required, causing the page to dim.

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>

Answer 3

Answer №2

To achieve the desired outcome, simply follow these steps in the correct sequence:

reset.addEventListener("click", function(){
    // Apply dark overlay to the page
    document.querySelector("#body").classList.add("darkenPage");

    // Display an alert box (this temporarily halts Javascript execution)
    alert("Reset Successful!!");

    // Remove the dark overlay from the page
    document.querySelector("#body").classList.remove("darkenPage");
});

If the above method does not produce the expected result and you wish to ensure that the CSS takes effect first, consider introducing a slight delay before displaying the alert using setTimeout.

reset.addEventListener("click", function(){
    // Apply dark overlay to the page
    document.querySelector("#body").classList.add("darkenPage");

    // Ensure the dark overlay is rendered before showing the alert
    setTimeout(function(){
        // Display an alert box (this pauses javascript execution)
        alert("Reset Successful!!");

        // Remove the dark overlay from the page
        document.querySelector("#body").classList.remove("darkenPage");
    }, 0);
});

Answer 4

To achieve the desired outcome, simply follow these steps in the correct sequence:

reset.addEventListener("click", function(){
    // Apply dark overlay to the page
    document.querySelector("#body").classList.add("darkenPage");

    // Display an alert box (this temporarily halts Javascript execution)
    alert("Reset Successful!!");

    // Remove the dark overlay from the page
    document.querySelector("#body").classList.remove("darkenPage");
});

If the above method does not produce the expected result and you wish to ensure that the CSS takes effect first, consider introducing a slight delay before displaying the alert using setTimeout.

reset.addEventListener("click", function(){
    // Apply dark overlay to the page
    document.querySelector("#body").classList.add("darkenPage");

    // Ensure the dark overlay is rendered before showing the alert
    setTimeout(function(){
        // Display an alert box (this pauses javascript execution)
        alert("Reset Successful!!");

        // Remove the dark overlay from the page
        document.querySelector("#body").classList.remove("darkenPage");
    }, 0);
});

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Answer №1

Answer №2

Similar questions

Obtaining data from a callback function within a NodeJS application

The JavaScript array slideshow is experiencing some glitches in its transition

Is there a way to stop the Firebase web client from altering the error message generated by an https.onRequest function?

What is the best approach to determine the value of a textbox in an array for each row of

Discovering more about this topic

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

Limit the input to a maximum number of characters

AngularJS JSON data computation

Avoiding memory leaks when using three.js with a large number of shapes

Using Telerik Grid in MVC to access the object that is passed to ClientEvent functions on the Javascript side

Incorporating words into the core of a pie chart: Highcharts

Error encountered when using the $.post function

What is the best way to insert a Button within a Tab while ensuring that the indicator remains in the appropriate tab?

Oops! You're trying to perform actions that must be plain objects. If you need to handle async actions

Using Javascript's Speech Recognition to activate a button

Utilize fetch API in React to streamline API responses by filtering out specific fields

Client-side image upload problem in Next.js API routes

Bootstrap 4 modal experiencing issues with the form end tag functionality

What is the best way to retrieve classes from arrays and apply styling to them using javascript?

What could be causing the issue with the .toLocaleTimeString method not properly converting time zones?