Tester Tester - 11 days ago 7
jQuery Question

Can not set jquery ui dialog overlay background color

I want to set the Jquery UI dialog overlay background to different color. The following CSS is not working.

.ui-widget-overlay{background:red;}


Please see fiddle.

Answer

You need to add the modal option to the dialogue settings then your fiddle will work.

$("#dialog").dialog({
  width: 300,
  resizable: false,
  draggable: false,
  modal: true
});

FYI I found this out by using the F12 feature in Chrome and looking for the overlay element which was not present. That led me to the JQuery UI docs.