JQuery dialog box overlay

Question

I used different jQuery dialogs. For some dialogs, I want a transparent background. If I changed the CSS backgroundin the class .ui-widget-overlay, then it applies to all dialog boxes.

How to set different background colors for different dialogs?

Answer 1

Just create a style similar to the one below and use the option dialogClassin these dialogs that require a transparent background. Of course, you can create multiple styles and convey 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 out the demo site: http://jsbin.com/ifoja (basic jquery, jquery ui, jquery ui css + custom css transparency class)

Answer 2

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

Answer 3

, ! important:

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

Answer 4

, .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','');

Answer 5

modal: false , .

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

Answer 6

@RonnySherer, , , IE7 jQuery. , overlay, / 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");
    }
});