Semantic-UI: How to change the background color of a dimmer?

Question

I want to change the dimmer color of my modal, but I can’t! what should I do?

<div class="ui modal"> <i class="close icon"></i> <div class="header"> Profile Picture </div> <div class="content"> <p>sth</p> </div> <div class="actions"> <div class="ui black button"> Nope </div> <div class="ui positive right labeled icon button"> Yep, that me <i class="checkmark icon"></i> </div> </div> </div> 

In JS:

I tried, for example, the following code, but no change!

 $('.ui.modal').each(function() { $(this).modal({allowMultiple: true}).modal('show').css('background-color', 'yellow'); }); 

Answer 1

Use the background-color property on the .dimmer element with a color value of type rgba type css to introduce transparency.

 .dimmer { background-color: rgba(250,250,50,0.8) } 

To apply this CSS using jQuery, use the jQuery#css method, for example:

 $(".dimmer").css("background-color","rgba(250,250,50,0.8)");