Question

I have the answer now. Please vote down to close this question. Thank you very much.

It’s like when you clicked Clear browsing data in Google Chrome settings. The behind screen is blur and then Clear browsing data window comes up. You can’t go back to settings which is blur now unless you closed the Clear browsing data. I don’t know what this effect is called or how can do that.

Please advise or give the reference(s).

Thank you.

Answer 1

You can use css3 filters if the browser supports it:

div {
  -webkit-filter: blur(2px);
}

For the dialog look for “modal dialogs”. Then you can switch the css with a class depending if the dialog is open or closed.

Blur demo: http://jsbin.com/atisiz/1/edit