Question 45918 in CSS Question posted in
Some basic documentation can be found here.

Blur on box alert – CSS

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>
Tags:

2

Answers


  1. 0

    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');
});
    Login or Signup to reply.
  2. 0

    Probably a better way of doing this would be to use the Dialog element.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

    const showButton = document.getElementById('showDialog');
const favDialog = document.getElementById('favDialog');
const confirmBtn = favDialog.querySelector('#confirmBtn');

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener('click', () => {
  document.querySelector("body").classList.add("blur");
  favDialog.showModal();
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', () => {
  document.querySelector("body").classList.remove("blur");
});
    .blur {
  filter: blur(8px);
}

#favDialog {
    border-radius: 10px;
    text-align: center;
    border: 1px solid #000;
}

button {
    margin: 15px auto;
    display: block;
}
    <h1>
Page Text Header
</h1>

<p>
Etiam iaculis nunc ac metus. Vestibulum eu odio. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.

Pellentesque auctor neque nec urna. Etiam rhoncus. Cras non dolor.

Praesent ac massa at ligula laoreet iaculis. Etiam feugiat lorem non metus. Phasellus consectetuer vestibulum elit.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Fusce neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc nec neque. Morbi ac felis.
</p>

<dialog id="favDialog">
  <form method="dialog">
    <div>
      <span>Button Notification Text</span><br/>
      <button id="confirmBtn" value="default">Ok</button>
    </div>
  </form>
</dialog>
<button id="showDialog">Show the dialog</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search