How to change jquery ui dialog overlay style

Jquery UI dialog which is useful for displaying information. You can fully customize this dialog. Here we explain how to change the style of dialog overlay style.

This is the css style. Add a new class 'overlayStyle' and apply the new styles within the brackets.

.ui-widget-overlay.overlayStyle
{
    background: repeat-x scroll 50% 50% #ff0000;
    opacity:0.3;
    filter:Alpha(Opacity=15);
}

Then use an addClass function for add the new style to the dialog

open: function (event, ui)
{
     $('.ui-widget-overlay').addClass('overlayStyle');
}

The final code is

$( "#dialog" ).dialog(
{
     open: function (event, ui)
     {
          $('.ui-widget-overlay').addClass('overlayStyle');
     }
});