Transparency of a Notification

Hi folks,

I want to have the possibility to let a notification stay at the window till I click somewhere (not only on the notification). Because there is no possibility to close the notification in the code, I had the following idea:
I set the Delaytime to -1 (setDelayMsec(-1)) and create a Notification over the whole Window. When you click at the “window” (actually the notification), the notification is getting closed.

Here my css:

.v-Notification-warning {
   top: 0 !important;
   left: 0 !important;
   width: 100%;
   height: 100%;
   max-width: none;
   border: none;
   padding: 0;
   background: white;
   text-align: center; /* For IE */
   opacity: 0.1;       /* modern browser */  
	-moz-opacity: 0.1;  /* older Mozilla browser */  
	ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE8 in Standard Compliant Mode */  
	filter:alpha(opacity=10); /* IE5.x -7.0 */ 

.v-Notification-warning .popupContent {
   text-align: left;
   max-width: 85%;
   margin: 0 auto;
   position: relative;
   top: 1%; 
   background: orange; 
   padding: 1em;


My problem is that the opacity has absolutely no affect. The best solution would be a opacity of 0 with the result that the user would not see that the “big” notification

Thanks for your help!


the opacity styling is set as an element style to the notifications (which is not good I think). Anyway, you should be able to override it anyway by adding !important at the end of your css directives, for example:

opacity: 0.1 !important;


This works for the whole notification, but not separated for the notification and the popupContent. If I am setting the opacity of .v-Notification-warning .popupContent to 0.7 and the opacity of .v-Notification-warning to 0.1, both are displayed with an opacity of 0.1

Well you just can’t do that since the popupContent is a child of the v-notification. The CSS opacity is always relative to to parent’s opacity, so if you set the v-notification opacity to 0.1, that will be the “most opacity” you can get for any child element.

OK, so my idea is not possible. Thanks for your help nad have a nice weekend :slight_smile:

[quote=Michael Kost]
OK, so my idea is not possible. Thanks for your help nad have a nice weekend :slight_smile:
[/quote]An old thread, but decided to offer additional info.

If you’re trying to make only the background of the notification more transparent, and leave the content fully visible, then you need something else than the opacity property.

Like Teppo said, opacity affects the whole element and anything it contains. To only affect the background of the notification, either use a semi-transparent PNG image, or use RGBa colors (background-color: rgba(0,0,0,0.1)). RGBa colors don’t work in IE8, mind you, so PNG’s are a more backwards compatible option.