Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Css Make Modal transparent
How can I make modal window transparent and keep it's contents opaque.
Everything becomes transparent when using the following CSS rules:
div.v-window-coolModal .v-window-contents {
opacity: 0;
}
div.v-window-coolModal .v-button .v-button-wrap .v-icon {
opacity: 100;
}
div.v-window-coolModal, .v-button-wrap {
opacity: 100;
}
I'm trying to get a transparent model with opaque buttons.
Applying opacity will affect all child elements as well, instead, you could try using a rgba color instead.
div.v-window-coolModal .v-window-contents {
/* Sane browsers */
background: rgba(255,255,255,0.6);
/* IE... */
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}
Thanks, your solution helped me realize that I was trying to over complicate the issue.
I eventually just went with:
div.v-window-coolModal .v-window-contents {
background: none;
}