jQuery UI dialog overlay - how to set different background colors for different dialogs

问题

I have used different jQuery dialogs. For some dialogs I want a transparent background. If I change the background CSS in the .ui-widget-overlay class then it will apply to all the dialogs.

How to set different background colors for different dialogs?

回答1:

Just create a style like the following and use the dialogClass option on those dialogs you want to have a transparent background. Of course you can make multiple styles and pass in whatever you want

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

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

Check demo site: http://jsbin.com/ifoja (basic jquery, jquery ui, jquery ui css + custom css transparent class)

回答2:

There is only one overlay for all jQuery widgets. Therefor we have to change it's opacity on demand:

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);
    }
});

回答3:

Maybe if you set the !important keyword:

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

回答4:

In your dialog call, just set modal:false for the dialogs you want transparent.

$( "#dialog-modal" ).dialog({
            height: 140,
            modal: false
        });

回答5:

My solution is similar to @RonnySherer, but it didn't seem to work in cruddy old IE7 with multiple jQuery UI dialogs. So instead of directly setting the opacity of the overlay element I simply added/removed a CSS class which worked in IE7 in addition to modern browsers.

CSS Class:

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");
    }
});

回答6:

I wrote the below code but it still taking the background of class .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','');

来源：https://stackoverflow.com/questions/1886678/jquery-ui-dialog-overlay-how-to-set-different-background-colors-for-different

标签

jquery

jquery-ui-dialog