具有ui-state-error的JqueryUI图标在对话框中不起作用

我有一个ninput和两个跨度,每个都有一个jquery ui图标,我试图在jquery ui对话框中内联显示。

当我尝试将ui-state-error应用于跨度时,会发生此问题。

在对话框外部,图标在对话框内正常工作,但图标没有正确显示……!

在此处输入图像描述

想法?

http://jsfiddle.net/kralco626/K6TzK/8/

如果您为弹出式div提供ID ,则将以下内容添加到CSS中以解决问题:

 #popupDiv > .ui-state-error { background-position: -32px -192px; } 

这应该对您在页面上的任何其他内容产生最小的影响。

在jsfiddle上演示

第一个上的ui-state-error类导致小部件内的图标出现问题。

jQuery UI主题css在窗口小部件内部具有不同的background规则,即覆盖其他背景。

 .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; } 

你可以从你的删除ui-state-error类来修复它,但如果你需要红色的“警告”大纲,那可能就不是你想要的了。

实际上问题不仅在于Error它对话框中的任何小部件。 我注意到为什么但是在对话框中CSS权重变得不同。

无论如何长话短说你只需要为你需要使用的图标添加CSS:

 #popupDiv > .ui-icon-circle-close { background-position: -32px -192px; } 

从这个小提琴可以看出: http : //jsfiddle.net/8J395/

希望它可以帮到某人。