jQuery UI模式对话框条带问题

Question

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

Answer 1

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

background-color: #000;

为：

background: #000;

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

更新： Nick Craver在http://jsfiddle.net/QVXah/

提供了修复演示

Answer 2

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

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

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

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

您也可以设置

background: none;

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

Answer 3

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

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

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

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

Answer 4

之前我见过这个问题，我不确定为什么还没有解决。您应该能够通过从

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

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

看看它是否适合你

Answer 5

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

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