Error in the background/overlay of a jQuery dialog widget with the modal option

3 Views

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
});

enter image description here

Read More

Any idea of the reason for this malfunction?

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. 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;
}

  2. 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.