web-dev-qa-db-fra.com

jQuery: définir la couleur de superposition de la boîte de dialogue modale

Je voudrais ouvrir une boîte de dialogue modale en utilisant jquery ui où la superposition est complètement noire. Je sais que je peux définir cela dans le thème, mais je ne veux pas que toutes les boîtes de dialogue aient une superposition noire. Un seul d'entre eux.

Existe-t-il un moyen de configurer la couleur d'arrière-plan (superposition) d'une boîte de dialogue par boîte de dialogue? Peut-être quand il est créé?

TIA

overlayjquery-ui-dialog
27
mtmurdock

La réponse de Frédéric était très proche, mais cela m'a posé un problème: j'avais plus d'une boîte de dialogue sur cette page, et après avoir changé la superposition de la boîte de dialogue, elle les a toutes modifiées jusqu'à ce que la page soit rechargée. Cependant, cela m'a donné une idée;

J'ai d'abord stocké les valeurs par défaut dans des variables (étendue de la page), puis défini mon style personnalisé.

var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");

Ensuite, lorsque la boîte de dialogue est fermée, j'ai restauré ces valeurs.

$(".ui-widget-overlay").css("background", baseBackground).css("opacity", baseOpacity);

La raison principale de leur stockage dans des variables (par opposition à leur réinitialisation à des valeurs explicites) est la maintenabilité. De cette façon, même si le site.css change, cela fonctionnera.

Merci de votre aide!

3
mtmurdock

Vous pouvez utiliser les événements open et close de la boîte de dialogue ui.

$("#your-dialog").dialog(
{
    autoOpen: false, 
    modal: true, 
    open: function() {
        $('.ui-widget-overlay').addClass('custom-overlay');
    }          
});

Et ajoutez le style requis dans le CSS. Exemple:

.ui-widget-overlay.custom-overlay
{
    background-color: black;
    background-image: none;
    opacity: 0.9;
    z-index: 1040;    
}
41
mohitp

L'élément de superposition est un frère immédiat du widget de dialogue et expose le ui-widget-overlay class, pour que vous puissiez le faire correspondre et modifier la couleur d'arrière-plan par dialogue:

$("#yourDialog").dialog("widget")
                .next(".ui-widget-overlay")
                .css("background", "#f00ba2");

Vous pouvez voir les résultats dans ce violon .

12
Frédéric Hamidi

L'arrière-plan de la boîte de dialogue JQuery est un div qui a la classe "ui-widget-overlay". Les styles clés que vous souhaitez ajuster sont "opacité", "filtre" et "couleur d'arrière-plan" ("opacité" et "filtre" sont deux façons différentes de définir l'opacité pour les différents navigateurs.) Vous pouvez soit ajuster la définition de la classe, soit procédez comme suit dans la définition de la boîte de dialogue:

$("div#MyDialog").dialog({
    title: "My Dialog Title",
    open: function (event, ui) {
        $(".ui-widget-overlay").css({
            opacity: 1.0,
            filter: "Alpha(Opacity=100)",
            backgroundColor: "black"
        });
    },
    modal: true
});
9
Michael Erickson

Changement de fond:

$(".ui-widget-overlay").css({background: "#000", opacity: 0.9});

Restaurer l'arrière-plan des valeurs CSS:

$(".ui-widget-overlay").css({background: '', opacity: ''});
3
Ronny Sherer