JQueryUI对话框显示问题

Question

我有以下代码，用于构建一个JQueryUI对话框弹出框。

$j('<div></div>')
        .html(message)
        .dialog({
           autoOpen: true,
           bgiframe: true,
           buttons: { 'Dismiss': function() { $j(this).dialog('close') } },
           closeOnEscape: true,
           height: 'auto',
           modal: true,
           resizable: true,
           width: 400,
           title: 'An error has occurred'});

当弹出窗口第一次显示给用户时，它看起来像下面的图片，有一个巨大的标题头。我知道没有任何额外的css类被添加到弹出窗口。调整JQuery弹出窗口大小后，弹出窗口会正确显示。标题头会立即调整大小并正确显示。还有其他人遇到过这种情况吗？

- Mike Fielden

---

可能是因为您忘记包含对话框的CSS，即在通过主题滚动器构建主题时，由于它使用ui-widget类，因此它们具有基本样式，然后每个包含在自定义jQuery UI中的模块都会单独覆盖这些样式。 - peol

Answer 1

我之前从未遇到过这个问题，但我建议尝试以下两种方法：

如果您只想修复症状而不是问题本身，您可以进行样式覆盖：

.ui-widget-header { height: 100px }

您也可以逐个删除选项，以查看是否有一个选项导致了该问题。

- Will

---

我尝试系统地删除选项，但似乎没有一个是问题的原因。不过还是谢谢你的关注。如果我无法解决它，我想我可以覆盖每个样式。不过这似乎有点绕路，是吧？ - Mike Fielden

是的，确实如此，但不幸的是，作为最后的手段，它通常是你唯一的选择...我能想到的唯一其他问题可能是您创建的样式或脚本之间存在冲突。您是否应用于所有跨度或div的样式会影响它？ - Will

我看不出来。根据Firebug，它上面没有应用任何东西，只有JQuery样式。 - Mike Fielden

两件事：你能提供页面链接吗？你确定你的jQuery和jQuery UI都是最新版本吗？那看起来像是普通的Redmond主题，所以我在这方面没有看到问题...也许更仔细地检查页面会有帮助。 - Will

哎呀，之前好像说到一半就没说完。*jQuery和jQuery UI已经是最新版本了。 - Will

Answer 2

针对此对话框标题问题，您只需将以下属性添加到对话框的父类即可。

.ui-dialog { clear: both; }

- Soundar

Answer 3

刚刚更新到最新的UI CSS，效果非常棒...感谢你的帮助Will

- Mike Fielden