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的影子。

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

2 个答案: