Errore in background/overlay di un widget di finestra di dialogo jQuery con l'opzione modale

Question

Sto utilizzando il jQuery dialog widget con l'opzione modal su un sito di wordpress.
Lo sfondo (overlay) non è tutto grigio, c'è una striscia bianca sullo sfondo.

$("#popup").dialog({ 
    dialogClass: "alert", 
    width: crmpJs.setup.social_popup_custom_content_use ? crmpJs.setup.social_popup_setup_width : 640, 
    height: crmpJs.setup.social_popup_custom_content_use ? crmpJs.setup.social_popup_setup_height : "auto", 
    autoOpen: true, 
    modal: true, 
    resizable : false, 
    draggable : false, 
    zIndex: 10000, 
    closeOnEscape: crmpJs.setup.social_popup_content_locker_use == "yes" ? false : true 
}); 

Qualsiasi idea del motivo per cui questo malfunzionamento?

Answer 1

È il tuo CSS. Modificare il repeat-x per ripetere solo:

.ui-widget-overlay { 
    background: url("../img/overlay-bg.png") repeat-x scroll 50% 50% #000000; 
    opacity: 0.5; 
} 

a:

.ui-widget-overlay { 
    background: url("../img/overlay-bg.png") repeat scroll 50% 50% #000000; 
    opacity: 0.5; 
} 

Answer 2

Ho visto questo causato da jQuery UI non residenti nella base URL corrente, quindi la sua CSS non viene caricato . Almeno in Safari e Firefox, il browser non riesce a trovare l'immagine in modo da visualizzare una casella di ripetizione x di dimensioni predefinite, che provoca la barra bianca.

Alcune opzioni sono:

1. Spostare jQuery UI di nuovo all'interno della base URL.
2. Modificare il CSS in modo che punti all'URL assoluto, sebbene ci siano molti URL nei file CSS dell'interfaccia utente jQuery e rende l'aggiornamento un problema.
3. Sposta solo la directory delle immagini nella base dell'URL.
4. Sostituisci il selettore nel tuo CSS per dargli l'URL corretto.
5. Cerca una seconda copia di jQuery che potrebbe trovarsi in un'altra posizione come inclusione per un'altra libreria, che potrebbe sovrascrivere il jQuery principale.