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

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'

• SECOND:在样式表中,在步骤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这一事实将会很复杂.

祝好运!

Answer 2

我正在努力解决这个问题,发现CSS3盒子阴影功能可能是最好的解决方案.虽然它不能与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的影子.