jQuery UI对话框 - 无法看到closeText

我正在尝试制作一个简单的对话框 - 没有标题只是'关闭'这个词和右上角的X. 我的文字等将在下面.

但是我摆弄它我无法显示closeText属性 - 我可以在FireBug中看到它,但它不会出现,或者X图形下面会出现几个字符.

实际上问题是jQuery UI CSS和jQuery Dialog本身.

jQuery UI对话框执行以下操作,无论您传入的是什么closeText.

它会创建一个包含你的closeText

设置样式ui-icon和ui-icon-closethick'

无论您是否传入,实际上始终会创建范围closeText.它用于显示x-closing-image.

现在查看我们找到的默认jQuery UI CSS ui-icon

...
text-indent: -99999px;
width: 16px;
height: 16px;
...

因此jQuery设置文本,但浏览器永远不会显示它(text-indent: -99999px)和区域对于任何文本来说太小.

所以我做的是

//open dialog
$("#dialog").dialog({ closeText: 'Close me' });

//get the automagically created div which represents the dialog
//then get the span which has `ui-icon-closethick` class set (== contains closeText)
var closeSpan = $("div[role='dialog'] span.ui-icon-closethick");

//prepend a span with closeText to the closing-image
closeSpan.parent().before(
    ''+
    closeSpan.text()+
    ''
);

有关一个工作示例,请查看此http://jsbin.com/ibibe/