Search code examples
javascriptcssblur

Blur on box alert

I am making a program, I want to apply the "Blur" effect when an alert box arrives to the whole document. Could you suggest me how to do it?

I was using an example I found on the web but I don't know if it is correct. I am almost sure that the error is in the JavaScript but I don't know how to correct it.

Thanks for your help. 

function addBlur() {
  $(‘#main’).addClass(‘blur’);
  $(‘#t_TreeNav’).addClass(‘blur’);
}
.body {
  heigh: 665px;
  background-image: url(https://carontestudio.com/img/caronte-web-estudio-logo.png");
  background-size: 10rem;
}

.blur {
  flex-grow: 1;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
<body>
  <h2>This is a sample paragraph.</h2>
</body>

Solution

  • You can accomplish this in vanilla JS with addEventListener. You can attach it to DOM like this:

    document.addEventListener('alert', function() {
  // do something
});

    You can mix it with jQuery or write it with vanilla JS also:

    document.addEventListener('alert', function() {
  document.querySelector('#someId').classList.add('blur');
});