Aurelia modal dialog - is there a way to make the parent window fade?

Question

Hopefully the title makes this fairly self-explanatory.

Just a bit of background, I create and launch an aurelia modal dialog which appears on top of the parent window from where it is launched.

Is there a way to make the background (parent) window appear faded. I have done something similar in .NET environments, and just wanted to know if anything similar is achievable in aurelia?

Some example aurelia-dialog links:

https://www.tutorialspoint.com/aurelia/aurelia_dialog.htm

https://aurelia.io/docs/plugins/dialog#using-the-plugin

Answer 1

The answer to my question turned out to be on one of the aurelia forums:

https://github.com/aurelia/dialog/issues/84#issuecomment-239429527

It's a case up updating your css to include the background / opacity settings as follows:

ai-dialog-overlay.active {
background-color: black;
opacity: .5;
}

Having said this please be aware a breaking change had since been introduced whereby 'ai-dialog' was renamed to 'ux-dialog':

https://discourse.aurelia.io/t/trouble-with-aurelia-dialog-not-displaying-correctly/1382

So the code for your css should now read:

ux-dialog-overlay.active {
opacity: 0.6;
background-color: gray;
}

I found that this was all that was needed to make the background fade on opening the aurelia-based modal dialog, as well as un-fading on closing.