jQuery: jeu de dialogue modal Couleur de superposition
je voudrais lancer un dialogue modal en utilisant jQuery ui où la superposition est complètement noire. Je sais que je peux mettre cela dans le thème, mais je ne veux pas que tous les dialogues aient une superposition noire. L'un d'entre eux.
y a-t-il un moyen de configurer la couleur d'arrière-plan (superposition) d'une boîte de dialogue sur une base par boîte de dialogue? Peut-être lorsqu'il est créé?
TIA
5 réponses
Vous pouvez utiliser le ouvrir et fermer les événements de l'interface utilisateur-boîte de dialogue.
$("#your-dialog").dialog(
{
autoOpen: false,
modal: true,
open: function() {
$('.ui-widget-overlay').addClass('custom-overlay');
}
});
et ajouter le style requis dans le CSS. Exemple:
.ui-widget-overlay.custom-overlay
{
background-color: black;
background-image: none;
opacity: 0.9;
z-index: 1040;
}
l'élément overlay est un parent immédiat du widget de dialogue et expose le ui-widget-overlay class, de sorte que vous pouvez l'apparier et modifier la couleur de fond sur une base de dialogue:
$("#yourDialog").dialog("widget")
.next(".ui-widget-overlay")
.css("background", "#f00ba2");
Vous pouvez voir les résultats dans ce violon.
le fond de la boîte de dialogue JQuery est un div qui a la classe "ui-widget-overlay". Les styles clés que vous voulez ajuster sont "opacité", "filtre" et "fond-couleur" ("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 ou faire ce qui 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
});
la réponse de Frederic était très proche mais il me restait un problème: j'avais plus d'une boîte de dialogue sur cette page, et après que j'ai changé la superposition pour la boîte de dialogue one, elle les a toutes changées jusqu'à ce que la page soit rechargée. Cependant, il m'a donné une idée;
D'abord j'ai stocké les valeurs par défaut dans les variables (page scope), puis j'ai 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");
puis quand 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 pour les stocker dans des variables (par opposition à un réajustement de valeurs explicites) est pour la maintenabilité. De cette façon, même si le site.css changements, il va fonctionner.
Merci pour votre aide!
Modifier l'arrière-plan:
$(".ui-widget-overlay").css({background: "#000", opacity: 0.9});
Restaurer de fond en CSS valeurs:
$(".ui-widget-overlay").css({background: '', opacity: ''});