How to Change Background and Opacity of jQuery Modal Dialogs

The first of all, if your dialog is modaless, the overlay background is always transparent and accessible, you don't need the solution. The second, if you are satisfied with the default background color and opacity, you don't need the solution, either.

Now, back to our topic, our tactic is to overwrite jQuery-UI-provided style, make the browsers to replace the original settings, so we add the following snippet into the local CSS file to meet our goal..

.ui-widget-overlay {
  background-image: none;
  opacity: 100;
  background-color: rgba(0,0,0,0.5);
}

In the above, we reset overlay background image and opacity, then we use rgba function to manipulate all the attributes. In this case, we set the overlay background style to 50% transparent of black.

Leave a Reply

Your email address will not be published. Required fields are marked *