Jqueryui: how to make a shadow around a dialog box?

Question

I'm trying to put a drop shadow around a jqueryui dialog box. Something like:

<div id="dialog-form" class="ui-widget-shadow ui-corner-all">
    Some stuff in the box with a shadow around it
</div>

and then doing:

$(function () {
  $("#dialog-form").dialog({
    resizable: false,
    height: 300,
    width: 350,
    modal: true
  });
});

in the javascript section. How can I make a shadow around the dialog-form dialog?

Answer 1

You can achieve this using CSS3, but it won't work in all browsers.

• FIRST: In your dialog call, set the value of "dialogClass" equal to a class name of your choosing:

 dialogClass: 'dialogWithDropShadow'

• SECOND: In your stylesheet, set the drop shadow on the class specified in step 1.

<style type="text/css">
     .dialogWithDropShadow
     {
         -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
         -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
     }
</style>

Alternatively, you'll have to use other drop shadow techniques (div behind dialog, images, etc.) that will be complicated due to the fact that you aren't controlling the HTML rendered by jquery ui dialog.

Good Luck!