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

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实现的，该变量包含HTML代码和两个<div>元素。

在早期版本的jQueryUI中（例如V1.8.20），我可以直接将title属性分配给myTitle的内容，并且它的工作myTitle很myTitle 。 现在，我已升级到V1.10.2，并注意到标题不再解释HTML，而是在标题中显示<div> ... 如您所见，我正在使用调整的.siblings('.ui-dialog-titlebar').html(myTitle); 通过我的HTML代码，基本上可以正常工作。

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

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

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

我已经看过无处不在（从http://jqueryui.com/开始），在Google等中搜索过，但没有找到解决方案。

任何帮助深表感谢。

---

更新：（回答下面的评论）

• 我正在使用ui-lightness CSS主题而未做任何修改
• 将padding-right:20px添加到右对齐div的style属性中不能解决此问题。

---

最后说明：

与大家的讨论帮助我解决了很多问题。 我已经发布了最终对我有用的答案。

非常感谢所有支持我的人，你们真的很棒！ 每个发布答案的人都从我这里获得+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代码。

---

NB （一些背景信息）：此解决方案的灵感来自以下Stackoverflow文章： jQueryUI对话框标题中的图标 。

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

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