jQuery UI对话框 - 看不到closeText [英] jQuery UI Dialog - Cannot see the closeText

问题描述

我正在尝试制作一个简单的对话框 - 没有标题只有关闭和右上角的X。我的文本等等会在下面。

I'm trying to make a simple Dialog - no title just the word 'Close' and the X in the top right hand corner. My text etc. will then go underneath.

然而，我提到它，我无法得到closeText属性显示 - 我可以看到它在FireBug，但它没有出现，或者一些字符出现在X图形下。

However I fiddle with it I can't ever get the closeText attribute to display - I can see it in FireBug but it either doesn't appear, or a couple of characters appear under the X graphic.

推荐答案

其实问题是jQuery UI CSS jQuery对话框本身。

Actually the problem is the jQuery UI CSS and jQuery Dialog itself.

jQuery UI对话框以 closeText 的所有方式执行以下操作。

The jQuery UI Dialog does the following with whatever you pass in as closeText.

• 它会创建一个< span>< / span> closeText


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

• it creates a <span></span> which contains your closeText
• sets the styles ui-icon and ui-icon-closethick' on it

实际上总是创建这个span，无论你是否传递 closeText 。它用于显示 x -closing-image。

The span is actually always created, no matter if you pass in closeText or not. It is used to display the x-closing-image.

现在查看默认的jQuery UI CSS对于 ui-icon

Now looking into the default jQuery UI CSS we find for ui-icon

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

因此，jQuery设置文本，但浏览器将永远不会显示（ text-indent：-99999px ）和区域对于任何文本来说都太小。

Thus jQuery sets the text but the browser will never show it (text-indent: -99999px) and region too small for any text.

所以我做的是

So what I did is

//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/ 为一个工作示例

Check this http://jsbin.com/ibibe/ for a working example

这篇关于jQuery UI对话框 - 看不到closeText的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！