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!

Answer 2

I was struggling with this and found that the CSS3 box-shadow feature is probably the best solution. While it won't work with IE8 I find that acceptable. Here is what you do:

CSS

.ui-dialog-shadow { box-shadow: 0 0 0 7px rgba(0,0,0,0.1); }

Dialog Code

open: function() { $(".ui-dialog").addClass("ui-dialog-shadow"); },

I tried to duplicate the shadow that we had jQuery UI 1.6 as closely as I could.