Jqueryui：如何在对话框周围制作阴影？

我正试图在jqueryui对话框周围放置一个阴影。 就像是：

 Some stuff in the box with a shadow around it  

然后做：

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

在javascript部分。 如何在dialog-form对话框周围制作阴影？

Answer 1

您可以使用CSS3实现此目的，但它不适用于所有浏览器。

• 首先：在对话框调用中，将“dialogClass”的值设置为您选择的类名：

  dialogClass: 'dialogWithDropShadow' 

• SECOND：在样式表中，在步骤1中指定的类上设置投影。

或者，您将不得不使用其他阴影技术（div后面的对话框，图像等），这些技术会因为您不控制jquery ui对话框呈现的HTML而变得复杂。

祝好运！

Answer 2

我正在努力解决这个问题，发现CSS3盒子阴影function可能是最好的解决方案。 虽然它不能与IE8一起工作但我觉得可以接受。 这是你做的：

CSS

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

对话代码

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

我试图尽可能地复制我们拥有jQuery UI 1.6的影子。