透明的 jQuery UI 对话框答案

【问题标题】：Transparent jQuery UI Dialog透明的 jQuery UI 对话框
【发布时间】：2011-06-05 03:51:15
【问题描述】：

有人知道如何使 ui 对话框透明吗？

【问题讨论】：

【解决方案1】：

创建一个类：

   .transparent_class {
        filter:alpha(opacity=50); /* for IE4 - IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
   }

并将此类添加到您的 UI 元素中。

在their blog.上阅读有关 MS IE 过滤器的更多信息

【讨论】：

这将使 UI 元素及其内容透明
我不知道 IE 有多好（也不喜欢它），但它似乎需要像 filter: alpha(opacity = 50); 这样的值。
哦，对不起。没有看到我在课堂上已经有了它。从 IE8 开始，您需要一个额外的 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";。但我现在不能尝试。对不起。

【解决方案2】：

只需创建如下所示的样式，并在您希望具有透明背景的对话框上使用 dialogClass 选项。当然你可以制作多种样式并传入任何你想要的东西

<style type="text/css" media="screen">
    .transparent { background:transparent }
</style>

//make dialog with transparent background
$("#dialog").dialog({dialogClass:'transparent'});
//make default dialog
$("#dialog2").dialog();

查看演示站点：jsBin（基础 jquery、jquery ui、jquery ui css + 自定义 css 透明类）

【讨论】：