javascript - 如果标题包含右对齐文本，jQuery UI 对话框将隐藏关闭 (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实现。 ，一个包含两个 <div> 的 HTML 代码的变量元素。

在以前的 jQueryUI 版本中(例如 V1.8.20)，我可以直接为标题属性分配 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到 style右对齐的属性 div没有解决问题。

---

最后说明:

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

非常感谢所有支持我的人，你们真的很棒!发布答案的每个人都得到了我的 +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