2010-07-08 60 views
12

我有这个非常基本的jQuery UI的模态对话框,我测试here.写道除非我失去了一些东西我想不通为什么他们是在页面的中间是灰色地带。我试图操作模式背景颜色和不透明度以及在CSS标记中看到的。jQuery UI的模态对话框条纹问题

+0

你控制脚本插入页面的底部,外''? – 2010-07-08 01:02:26

回答

28

的问题是,jQuery UI的定义的背景不只是一个纯色:它是一个图像(支持覆盖图中的条纹等图案)。当您使用整合器自定义jQuery UI主题时,它会为您生成彩色图像。要解决您的网页,所有你需要做的是从编辑的内嵌CSS在网页上的48行:

background-color: #000; 

到:

background: #000; 

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

UPDATE: 尼克Craver提供的修补程序的演示在http://jsfiddle.net/QVXah/

+4

+1 - 即将发布此,这确实是问题,这是一个演示与修复你想包括它在你的答案:http:/ /jsfiddle.net/QVXah/ – 2010-07-08 01:11:50

+0

这是一个非常方便的网站!我会尽量记住下次使用。 – sunetos 2010-07-08 01:18:01

+0

我认为如果你完成了答案会更好。我的意思是,你会在哪里应用这个背景:#000;'?只是为了读者的传递:) – Reigel 2010-07-08 01:20:02

0

我以前见过这个问题,我不知道为什么它一直未动。您应该能够通过移除jQuery的ui.css线〜285从

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

解决它看看是否能为你工作

+1

只是一个人抬头,看看那个文件的托管位置......它可能不是一个选项:) – 2010-07-08 01:04:52

+0

恩,呃,自己托管文件呢? – 2010-07-08 01:05:54

+0

我在一些网站上有这个问题。我的这个解决方案(和其他问题)是从//ajax.googleapis.com的jquery加载我的css并覆盖一些样式。这样,我可以从谷歌apis加载,但纠正这个东西... – 2014-03-09 22:10:57

14

这个问题是3岁以上,并且这个问题在jQuery中仍然存在。

什么工作对我来说是重写jQuery的CSS类定义的背景下,通过我自己的CSS文件

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

加入这个和装载装载jQuery的CSS后,我的CSS。现在我没有看到这个烦人的柄,并得到一个很好的透明浅灰色背景。

您还可以设置

background: none; 

但是,这将使其混乱的用户,因为背景将仍然可见,但不起作用。

+0

我从CDN加载,所以更改文件不是一个选项。这很好! – Scottie 2014-06-13 22:00:32

1

我的解决方案是一个有点不同。而不是改变背景颜色,我做到了透明:

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

与其他类似的解决方案,我把这个中是从加载的jQuery的ui.css后加载的.css文件code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css。

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

0

如果您使用的是CDN,不希望加载/维持另一个CSS,使用的重要替代:

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