jQuery Jqueryui：如何在对话框周围制作阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3448813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jqueryui: how to make a shadow around a dialog box?
提问by James
I'm trying to put a drop shadow around a jqueryui dialog box. Something like:
我正在尝试在 jqueryui 对话框周围放置阴影。就像是：
<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-formdialog?
在 javascript 部分。如何在dialog-form对话框周围制作阴影？
回答by ctorx
You can achieve this using CSS3, but it won't work in all browsers.
您可以使用 CSS3 实现这一点，但它不适用于所有浏览器。
- FIRST: In your dialog call, set the value of "dialogClass" equal to a class name of your choosing:
- 首先：在您的对话调用中，将“dialogClass”的值设置为您选择的类名：
dialogClass: 'dialogWithDropShadow'
dialogClass: 'dialogWithDropShadow'
- SECOND: In your stylesheet, set the drop shadow on the class specified in step 1.
- 第二：在您的样式表中，在步骤 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>
<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.
或者，您将不得不使用其他投影技术（对话框后面的 div、图像等），由于您没有控制 jquery ui 对话框呈现的 HTML，这些技术会很复杂。
Good Luck!
祝你好运！
回答by Hawkee
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:
我为此苦苦挣扎，发现 CSS3 box-shadow 功能可能是最好的解决方案。虽然它不适用于 IE8，但我认为这是可以接受的。这是你要做的：
CSS
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.
我试图尽可能地复制我们拥有 jQuery UI 1.6 的阴影。
