Question

我有以下代码示例：

<div id="dlgTest1" style="display: none">
    <p>
        Lorem ipsum test popup dialog<br />
        <br />
        Click the OK button to resume activity.
    </p>
</div>
<script type="text/javascript">
$(document).ready(function () {
        var myTitle = 
        "<div style='float: left'>LEFT TEXT</div><div style='float: right'>RIGHT TEXT</div>";
        $("#dlgTest1").dialog({
            title: '', //  new jquery-ui-1.10.2 doesn't allow HTML here
            autoOpen: false,
            minWidth: 500, width: 500,
            minHeight: 200, height: 200,
            resizable: true,
            modal: true,
            show: "blind",
            hide: "explode",
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
        }).siblings('.ui-dialog-titlebar').html(myTitle); // title goes here
        $("#dlgTest1").dialog("open").dialog("moveToTop");
});
</script>

此示例代码打开一个jQuery对话框，该对话框在左侧和右侧的标题栏中显示文本，该文本由myTitle实现，该变量包含两个{{1}的HTML代码} elements。

在jQueryUI的早期版本（例如V1.8.20）中，我能够直接为title属性分配<div>的内容，它就像一个魅力。现在我已升级到V1.10.2并注意到该标题不再解释HTML，而是在标题中显示myTitle。正如您所看到的，我使用调整<div> ...来传递我的HTML代码，该代码基本上可以正常工作。

但它有副作用，它隐藏了用于关闭对话框的（X）按钮（在较旧的jQUery UI版本V1.8.20中没有出现副作用）。我不能回到早期版本的jQueryUI，因为我需要依赖于最新版本的控件。

问题：如何避免右对齐文字隐藏（X）关闭按钮？

注意：如果我使用普通文本而不是HTML格式的文本，则会显示图标，因此不的原因是缺少样式或位图。

我已经到处查看过（从http://jqueryui.com/开始），在谷歌搜索等，但没有找到解决办法。

非常感谢任何帮助。

更新：（以下评论的答案）

我正在使用 ui-lightness css主题而不做任何修改
将.siblings('.ui-dialog-titlebar').html(myTitle);添加到右对齐padding-right:20px的{{1}}属性并不能解决问题。

最后说明：

与你的讨论都帮助我解决了这个问题。我已经发布了最终对我有用的答案。

非常感谢所有支持我的人，你们真的很棒！每个发布回答的人都得到了我的+1。

Answer 1

问题是您正在替换标题栏的html，因此您要删除关闭按钮。

将html()更改为append()，您需要调整边距/填充以使其看起来正确。

var myTitle = 
    "<div style='float: left'>LEFT TEXT</div><div style='float: right; margin-right:10px;'>RIGHT TEXT</div>";

和

}).siblings('.ui-dialog-titlebar').append(myTitle);

JSFiddle

Answer 2

Epascarello建议使用.append(myTitle) 而不是 .html(myTitle)的方法在JSFiddle示例中正常工作，但遗憾的是没有使用jQueryUI的ui-lightness自定义我正在使用。

但是以下功能可以做到：

// Insert HTML formatted title in jQuery dialog V1.10.2
// Parameters: 
// dialog = reference to jQueryUI dialog, 
// hmtlTitle = the title with containing HTML to apply to dialog
function applyHtmlToDialog(dialog, htmlTitle) {
    dialog.data("uiDialog")._title = function (title) { 
            title.html(this.options.title); };
    dialog.dialog('option', 'title', htmlTitle);
}

要使用它，只需按以下方式调用：

applyHtmlToDialog($("#dlgTest1").dialog(), myTitle);

或者如果你喜欢多行：

var myDiag = $("#dlgTest1").dialog(//... your dialog definition ...
                                    );
var myTitle = '<div> ... </div>'; 
applyHtmlToDialog(myDiag, myTitle);

它会正确插入myTitle并考虑其中包含的HTML代码。

N.B。（一些背景信息）：此解决方案的灵感来自以下Stackoverflow文章： Icons in jQueryUI dialog title。

我发现这种行为的原因是jQuery团队担心对话框的XSS漏洞，因此他们故意改变了它。

如果您有兴趣，可以详细了解他们的讨论here。因此，_title是jQuery提供的官方功能，以防您想在标题中使用HTML代码。我相信他们选择了一种不那么简单的方法，如.dialog({ title: $("... html ...") })，我个人更喜欢（即用$表示你想要在标题中包含HTML）

如果title包含右对齐文本，则jQueryUI对话框隐藏close（X）按钮。我怎样才能解决这个问题？

2 个答案: