jQuery UI dialog overlay - comment définir des couleurs de fond différentes pour différentes boîtes de dialogue

J'ai utilisé différents jQuery boîtes de dialogue. Pour certains dialogues je veux un fond transparent.
Si je change le background CSS dans le .ui-widget-overlay classe puis elle s'appliquera à toutes les boîtes de dialogue.

Comment définir des couleurs de fond différentes pour différentes boîtes de dialogue?

OriginalL'auteur shaz | 2009-12-11

  1. 4

    Il suffit de créer un style comme le suivant et utiliser le dialogClass option sur les boîtes de dialogue vous voulez avoir un fond transparent. Bien sûr, vous pouvez faire de multiples styles et réussir dans tout ce que vous voulez

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

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

    Vérifier le site de démo: http://jsbin.com/ifoja (base de jquery, jquery ui, jquery ui css + css personnalisé transparent classe)

    OriginalL'auteur jitter

  2. 3

    Il y a seulement une superposition de tous les widgets jQuery. À cet effet, nous devons changer l'opacité sur demande:

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

    OriginalL'auteur Ronny Sherer

  3. 1

    Peut-être que si vous définissez la !mot-clé important:

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

    OriginalL'auteur

  4. 0

    Dans votre boîte de dialogue appel, il suffit de définir modal:false pour les boîtes de dialogue que vous voulez transparent. 

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

    OriginalL'auteur Jason

  5. 0

    Ma solution est similaire à @RonnySherer, mais il ne semble pas fonctionner dans cruddy vieux IE7 avec plusieurs jQuery UI boîtes de dialogue. Ainsi, au lieu de directement réglage de l'opacité de l'élément de superposition j'ai simplement ajouté/retiré une classe CSS qui a travaillé dans IE7 en plus de navigateurs modernes.

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

    OriginalL'auteur Xman82FTW

  6. 0

    J'ai écrit le code ci-dessous mais il prend toujours le fond de la classe .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','');
    vérifier le lien de démonstration à la fin de ma réponse

    OriginalL'auteur shaz