I am using the jQuery dialog widget with the modal option over a wordpress site.
The background (overlay) is not all grey, there is a white stripe across the background.

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

Any idea of the reason for this malfunction?

I am using the jQuery dialog widget with the modal option over a wordpress site.
The background (overlay) is not all grey, there is a white stripe across the background.

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

Any idea of the reason for this malfunction?

• javascript
• css
• wordpress
• jquery-ui

• This still exists in the current version of jQueryUI (1.10.1) as of this ment writing. You may want to pass on a question to their team as to why they wrote it this way. It was the same in the previous version also. There may be a legitimate reason for doing so or might depend on the surrounding styles (especially on the BODY and HTML elements.) – Neil Monroe Commented Mar 12, 2013 at 23:42

2 Answers 2

It's your CSS. Change the repeat-x to just repeat:

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

to:

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

I've seen this being caused by jQuery UI not residing in the current URL base, so its CSS doesn't load. In Safari and Firefox at least, the browser can't find the image so it renders a repeat-x box of default size, which causes the white bar.

Some options are:

1. Move jQuery UI back inside the URL base.
2. Change the CSS to point to the absolute URL, although there's a lot of URLs in the jQuery UI CSS files, and it makes upgrading a pain.
3. Move just the images directory to the URL base.
4. Override the selector in your own CSS to give it the correct URL.
5. Look for a second copy of jQuery which might be in another location as an inclusion for another library, that might be overriding your main jQuery.