使用模式选项的jQuery对话框小部件的背景/叠加层出错

Question

我在wordpress网站上使用jQuery dialog widget和modal选项 背景（叠加）并非全是灰色，背景上有白色条纹。

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

是否有这种故障的原因？

Answer 1

这是你的CSS。将repeat-x更改为重复：

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

为：

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

Answer 2

我看到这是由于jQuery UI没有驻留在当前的URL基础中引起的，所以它的CSS不会加载。至少在Safari和Firefox中，浏览器无法找到图像，因此它会呈现一个默认大小的repeat-x框，从而导致白条。

有些选择是：

1. 将jQuery UI移回URL基础。
2. 将CSS更改为指向绝对URL，尽管jQuery UI CSS文件中有很多URL，这会让升级成为一种痛苦。
3. 只将images目录移动到URL基础。
4. 覆盖您自己CSS中的选择器，为其提供正确的网址。
5. 查找jQuery的第二个副本，该副本可能位于另一个位置，作为另一个库的包含，可能会覆盖您的主jQuery。