如果标题包含右对齐的文本，jQueryUI对话框将隐藏关闭(X)按钮。我怎么才能解决这个问题？
我有以下代码示例：
<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>元素的<div>代码。
在jQueryUI的早期版本(例如V1.8.20)中，我能够直接用myTitle的内容分配title属性，它的工作就像一种魅力。现在我升级到V1.10.2，注意到标题不再解释HTML，而是在标题中显示<div> ...。正如您所看到的，我正在使用经过调整的.siblings('.ui-dialog-titlebar').html(myTitle);来传递我的HTML代码，这基本上是有效的。
但是它的副作用是它隐藏了用于关闭对话框的(X)按钮(在旧的jQUery UI版本V1.8.20中没有出现这种副作用)。我不能回到jQueryUI的早期版本，因为我需要依赖于最新版本的控件。
问题：如何避免(X)关闭按钮被右对齐的文本隐藏？
注意:如果我使用普通文本而不是HTML格式的文本，则显示图标，所以原因是而不是缺少样式或位图。
我已经到处找过了(从http://jqueryui.com/开始)，在谷歌搜索等等，但没有找到解决方案。
任何帮助都是非常感谢的。
更新：(对以下评论的答复)
- 我使用的是ui-lightness css主题，没有任何修改。
- 将
padding-right:20px添加到右对齐div的style属性并不能解决这个问题。
最后注：
与你们的讨论帮助我很好地解决了这个问题。我贴出了最后对我有用的答案。
非常感谢所有支持我的人，你们真的很棒！每个发了答案的人都得到了我的+1。
回答 1
Stack Overflow用户
发布于 2013-03-22 09:57:58
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文章的启发：jQueryUI对话框标题中的图标。
我发现造成这种行为的原因是jQuery团队对对话框中的XSS漏洞有顾虑，所以他们故意更改它。
如果你有兴趣的话，你可以读到更多关于他们讨论这里的信息。因此，_title是jQuery提供的官方功能，如果您想在标题中使用HTML的话。我相信他们选择了一种不像.dialog({ title: $("... html ...") })那样简单的方法，我个人会更喜欢这种方法(即使用$来表示您想要在标题中使用HTML )。
https://stackoverflow.com/questions/15553143
复制相似问题
腾讯云开发者
