Background opacity

[mariannafld]

Hello, How to change background opacity, when modal dialog is opened? Thank you

(Duplicated with when pop-up open gray-out the background color #36)

Solved by adding: .modal { background-color: rgba(90,90,90,0.5); }

[kahanu]

In which CSS file did you add this? I tried adding it to the modal component, and it doesn't do anything. Also when I set the 'backdropColor' options, it sets the color with no opacity. I wish the documentation was a little clearer on this.

[mariannafld]

Hi, In my own CSS, I made the following overrides (ems-modal-dialog is a custom class):

/* To show modal dialog not on the top of the page */
.modal.show .modal-dialog {
  transform: translate(0, 10vh);
}
/* To align close sign (x) to the right */
.ems-modal-dialog .modal-header {
   display: block!important;
 }
/* Change background */
.modal {
  background-color:  rgba(90,90,90,0.5);
}

And my basic CSS is: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

[jrpereirajr]

@kahanu, I had to add the class into src/layout.css.

However, I think that the best file to add it would be the component's CSS file (the component which inherits from DialogComponent). But, I can't got background working adding .modal class in any other file rather than src/layout.

Anyone have any idea?