JQueryUI 对话框显示问题答案

【问题标题】：JQueryUI Dialog display issueJQueryUI 对话框显示问题
【发布时间】：2010-07-28 18:49:16
【问题描述】：

我有以下代码构建一个 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 弹出窗口的大小后，弹出窗口正确显示。标题会立即调整大小并正确显示。

以前有没有其他人遇到过这种情况？

【问题讨论】：

（将答案移至此帖）；可能是您忘记包含对话框的 CSS，即通过主题滚轮构建主题时，因为它使用 ui-widget 类，它们具有基本样式，然后这些样式会被您包含在您的每个模块中单独覆盖自定义滚动的 jQuery UI。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我以前从未遇到过这个问题，但我建议两件事：

如果你想解决症状而不是问题，你可以做一个样式覆盖：

.ui-widget-header { 高度：100px }

您也可以尝试一次删除一个选项，看看其中一个是否导致问题。

【讨论】：

我确实尝试系统地删除这些选项，但这些选项似乎都不是问题。不过很好看。如果我无法弄清楚，我想我可以覆盖每种风格。不过，似乎有点解决方法，是吧？
是的，它当然是，但不幸的是，作为最后的手段，它通常是你唯一的一个……我能想到的唯一另一个问题是你创建的样式或脚本冲突。您是否有任何样式应用于会影响它的所有跨度或 div？
我看不到。根据 Firebug 没有应用任何东西，只有 JQuery 样式。
两件事：你能提供一个指向页面的链接吗？你确定你的jQuery和jQuery UI吗？这看起来像普通的雷德蒙德，所以我看不出有问题……也许仔细检查页面会有所帮助。
糟糕，未完成的想法。 *jQuery 和 jQuery UI 是最新的

【解决方案2】：

刚刚更新到最新的 UI CSS 并像冠军一样工作......感谢您的帮助 Will

【讨论】：

【解决方案3】：

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

.ui-dialog { clear: both; }

【讨论】：