jQuery: imposta il colore della sovrapposizione della finestra di dialogo modale

Question

Vorrei aprire una finestra di dialogo modale utilizzando jquery ui in cui la sovrapposizione è completamente nera. So che posso impostare questo nel tema, ma non voglio che tutte le finestre di dialogo abbiano una sovrapposizione di nero. Solo uno di loro.

C'è un modo per configurare il colore di sfondo (sovrapposizione) di una finestra di dialogo in base a una finestra di dialogo? Forse quando viene creato?

TIA

Answer 1

risposta di Federico è stato molto vicino, ma mi ha lasciato con un problema: ho avuto più di una finestra su quella pagina, e dopo ho cambiato la sovrapposizione per quella finestra di dialogo, è cambiato tutti loro fino a quando la pagina è stata ricaricata. Tuttavia, mi ha dato un'idea;

Prima ho memorizzato i valori predefiniti in variabili (ambito della pagina), quindi ho impostato il mio stile personalizzato.

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

Quindi, quando la finestra di dialogo è chiusa, ho ripristinato quei valori.

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

La ragione principale per la loro memorizzazione in variabili (al contrario di loro ripristinare i valori espliciti) è per manutenibilità. In questo modo, anche se il sito.css cambia, funzionerà.

Grazie per il vostro aiuto!

Answer 2

L'elemento di sovrapposizione è un fratello immediata del widget di dialogo ed espone la classe ui-widget-overlay, in modo da poter abbinare e modificare il colore di sfondo su una finestra di dialogo per-base:

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

Puoi vedere i risultati in this fiddle.

Answer 3

Lo sfondo della finestra di dialogo JQuery è un div che ha la classe "sovrapposizione di ui-widget". Gli stili chiave che si desidera regolare sono "opacità", "filtro" e "colore di sfondo" ("opacità" e "filtro" sono due diversi modi di impostare l'opacità per i diversi browser.) È possibile regolare la definizione della classe o effettuare le seguenti operazioni nella finestra di definizione:

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

Answer 4

Cambio di fondo:

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

Ripristina sfondo ai valori CSS:

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

Answer 5

È possibile utilizzare i aperta e stretti eventi della UI-finestra.

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

E aggiungere lo stile richiesto nel CSS. Esempio:

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