jQuery UI 模态对话框条纹问题答案

【问题标题】：jQuery UI Modal Dialog Stripe IssuejQuery UI 模态对话框条纹问题
【发布时间】：2011-03-13 02:46:48
【问题描述】：

我有一个非常基本的 jQuery UI 模态对话框，我为测试 here. 编写的，除非我遗漏了一些东西，否则我无法弄清楚为什么它们是页面中间的灰色条。我正在尝试操纵模态背景颜色和不透明度以及在 CSS 标记中看到的。

【问题讨论】：

【解决方案1】：

问题在于 jQuery UI 定义的背景不仅仅是纯色：它是一个图像（以支持叠加层中的条纹等图案）。当您使用 themeroller 自定义 jQuery UI 主题时，它会为您生成彩色图像。要修复您的页面，您需要做的就是在第 48 行从以下位置编辑页面中的内联 CSS：

background-color: #000;

到：

background: #000;

这将覆盖整个背景规范，而不仅仅是颜色。

上提供了修复的演示

【讨论】：

【解决方案2】：

这个问题已经3年多了，jQuery中仍然存在这个问题。

对我有用的是通过在我自己的 CSS 文件中添加它来覆盖定义背景的 jQuery CSS 类

.ui-widget-overlay {
  background: #000;
}

并在加载 jQuery CSS 后加载我的 CSS。现在我看不到这个恼人的菌柄，并且得到了一个漂亮的透明浅灰色背景。

你也可以设置

background: none;

但这会让用户感到困惑，因为背景仍然可见但不起作用。

【讨论】：

【解决方案3】：

我的解决方案有点不同。而不是改变背景的颜色，我只是让它透明：

.ui-widget-overlay {
  opacity: 0;
}

与其他类似的解决方案一样，我将它放在一个 .css 文件中，该文件在从 code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui 加载的 jquery-ui.css 之后加载.css。

我现在看到的只是弹出窗口，没有任何背景副作用。

【讨论】：

【解决方案4】：

我以前见过这个问题，但我不确定为什么它没有得到修复。您应该可以通过从

中删除 jquery-ui.css 的 ~285 行来修复它

.ui-widget-overlay {
    url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA
    ...
    }

看看这是否适合你

【讨论】：

请注意，看看该文件的托管位置...这可能不是一个选项 :)
呃，呵呵，那你自己托管文件？
我在某些网站上遇到了这个问题。我对此的解决方案（和其他问题）是在 jquery 之后从 //ajax.googleapis.com 加载我的 css 并覆盖一些样式。这样我就可以从 google apis 加载但更正这些东西......

【解决方案5】：

如果您正在使用 CDN 并且不想加载/维护另一个 css，请使用 !important 覆盖：

.ui-widget-overlay {background: #BEBEBE !important;}

【讨论】：