5

我使用了不同的 jQuery 对话框。对于某些对话框，我想要一个透明的背景。如果我更改类background中的 CSS，.ui-widget-overlay那么它将应用于所有对话框。

如何为不同的对话框设置不同的背景颜色？

4

6 回答 6

4

只需创建如下所示的样式，然后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();

查看演示站点： http: //jsbin.com/ifoja（基础jquery、jquery ui、jquery ui css + 自定义css透明类）

于 2009-12-11T09:03:33.567 回答
3

所有 jQuery 小部件只有一个叠加层。因此，我们必须根据需要更改它的不透明度：

var overlayOpacityNormal = 0.3, overlayOpacitySpecial = 0;
$('#idOfDlg').dialog({
    modal: true,
    open: function()
    {
        overlayOpacityNormal = $('.ui-widget-overlay').css('opacity');
        $('.ui-widget-overlay').css('opacity', overlayOpacitySpecial);
    },
    beforeClose: function()
    {
        $('.ui-widget-overlay').css('opacity', overlayOpacityNormal);
    }
});
于 2012-01-30T10:00:36.520 回答
1

也许如果你设置 !important 关键字：

<style type="text/css" media="screen">
    .transparent { background:transparent !important; }
</style>
于 2010-11-17T17:19:27.123 回答
0

我的解决方案类似于@RonnySherer，但它似乎不适用于带有多个 jQuery UI 对话框的脏旧 IE7。因此，我没有直接设置覆盖元素的不透明度，而是简单地添加/删除了一个 CSS 类，该类在 IE7 和现代浏览器中都可以使用。

CSS类： 

div.modalOverlaySolid
{
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

Javascript： 

$(div#divModalDialog).dialog({
    modal: true,
    open: function () {
        $(this).closest(".ui-dialog").next(".ui-widget-overlay").addClass("modalOverlayPrivate");
    },
    beforeClose: function() {
        $(this).closest(".ui-dialog").next(".ui-widget-overlay").removeClass("modalOverlayPrivate");
    }
});
于 2012-02-24T19:07:18.150 回答
0

在您的对话框调用中，只需为您想要透明的对话框设置 modal:false 。

$( "#dialog-modal" ).dialog({
            height: 140,
            modal: false
        });
于 2011-10-07T14:51:04.817 回答
0

我写了下面的代码，但它仍然是类的背景.ui-widget-overlay

$("#dialog_empty").dialog({     
    dialogClass:'transparent',                    
    resizable: false, 
    draggable: false, 
    modal: true,                
    height: 0, 
    width: 0,
    autoOpen: false,
    overlay: {
        opacity: 0
    }
});
$('#dialog_empty').dialog('open');
$('#dialog_empty').css('display','');
于 2009-12-11T10:37:35.890 回答