jQuery UI 对话框 - 无法看到 closeText

Question

我正在尝试制作一个简单的对话框 - 没有标题，只有“关闭”一词和右上角的 X。然后我的文字等将位于下方。

但是我摆弄它，我无法显示 closeText 属性 - 我可以在 FireBug 中看到它，但它要么不出现，要么在 X 图形下出现几个字符。

Answer 1

实际上问题出在 jQuery UI CSS 和 jQuery Dialog 本身。

jQuery UI 对话框会对您传入的任何内容执行以下操作 closeText 。

• 它创建了一个<span></span>其中包含您的 closeText
• 设置样式 ui-icon和ui-icon-closethick '在上面

无论您是否传入closeText，span实际上总是被创建的或不。它用于显示x -结束图像。

现在查看我们找到的默认 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(
    '<span style="float:right;margin-right:25px">'+
    closeSpan.text()+
    '</span>'
);

检查这个http://jsbin.com/ibibe/一个工作示例