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

Question

我正在尝试在 jqueryui 对话框周围放置阴影。像这样的东西:

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

然后做:

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

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

Answer 1

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

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

 dialogClass: 'dialogWithDropShadow'

• 第二:在样式表中，为第 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>

或者，您必须使用其他投影技术(对话框后面的 div、图像等)，由于您无法控制由 jquery ui 对话框呈现的 HTML，这些技术会很复杂。

祝你好运!