Définition de la couleur d'arrière-plan de la superposition de la boîte de dialogue modale de l'interface utilisateur JQuery

Question

Lorsque je charge le dialogue, l’arrière-plan devient un peu gris. Je voudrais faire plus sombre, mais je ne peux pas trouver une propriété qui en est responsable. Comment puis-je atteindre cet objectif?

Answer 1

C'est dans cet élément css:

 .ui-widget-overlay {
   background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
   opacity: .30;
   filter: Alpha(Opacity=30);
}
 

c'est à la ligne 294 de: jquery-ui-1.8.11.custom.css

Answer 2

Ajoutez ce CSS à votre feuille de style:

 .ui-widget-overlay
{
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background-color: rgb(50, 50, 50) !important; /* This will make it darker */
}
 

Answer 3

Le moyen le plus simple consiste à utiliser le themeroller .

Answer 4

Comme @spinlock, j'ai la bande qui tourne horizontalement:

Pour supprimer la bande et utiliser une couleur d'arrière-plan personnalisée, procédez comme suit pour l'événement open:

 open : function(event, ui){
    $("body").css({
        overflow: 'hidden'
    });
    $(".ui-widget-overlay").css({
        background:"rgb(0, 0, 0)",
        opacity: ".50 !important",
        filter: "Alpha(Opacity=50)",
    });
},
beforeClose: function(event, ui) {
    $("body").css({ overflow: 'inherit' })
}
 

Answer 5

J'avais un problème avec la solution de Blender, mais changer de "couleur de fond" en "fond" a résolu le problème. Je soupçonne que la raison en est que le CSS d'origine (jQuery-UI) utilise ce graphique PNG.