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

Question

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

当我尝试将ui-state-error应用于跨度时，会出现问题。

在对话框外，图标在对话框内正常工作，但图标无法正确显示......！

思想???

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

Answer 1

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

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中移除<span>类来修复它，但如果您需要红色“警报”大纲，则可能不完全正如您所说的那样

Answer 2

如果您将弹出窗口div设为ID，则可以将以下内容添加到CSS中以解决问题：

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

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

Demo on jsfiddle

Answer 3

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

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

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

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

希望它有所帮助。