Question

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

但是我操作它我无法显示closeText属性 - 我可以在FireBug中看到它，但它不会出现，或者X图形下会出现几个字符。

Answer 1

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

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

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

无论您是否传入closeText，实际上始终都会创建范围。它用于显示x - 关闭图像。

现在查看我们为ui-icon

找到的默认jQuery UI CSS

...
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/以获取有效工作示例

Answer 2

这个帖子有点旧......在搜索此问题的解决方案时通过Google找到。

像jitter解释的那样，问题在于jQuery UI CSS如何处理closeText选项。

来自jQueryUI @ jqueryui.com/demos/dialog/#option-closeText

（closeText）指定关闭按钮的文本。 请注意，关闭文本是使用标准时明显隐藏主题。

我所做的是以下内容：

// added a class to the dialog
$('.my-selector').dialog({dialogClass:'myclass'});

// jQuery UI CSS sets span.ui-icon to
// .ui-icon {display: block; text-indent:-99999px; overflow: hidden; background-repeat: no-repeat; }
// and .ui-icon { width: 16px; height:16px; background-image: url(....); }
// so unset default settings using the added class as selector:
$('div.myclass span.ui-icon').css({'display': 'inline', 'width': '100%', 'height':'100%', 'text-indent': 0,'overflow': 'visible'});

// now get the width of span.ui-icon
var uiIconSpanWidth = $('div.myclass span.ui-icon').width();

// calculate negative 'text-indent'
var offset = 5; // set offset
var textIndent = -(uiIconSpanWidth + offset);
textIndent = textIndent + 'px'; 

// reset css using textIndent as the value for the text-indent property
// (.. added 'line-height' and set its value to match the 'height' property so that the text is aligned in the middle..):
$('div.myclass span.ui-icon').css({'display': 'block', 'width': '16px', 'height': '16px', 'text-indent': textIndent, 'line-height': '16px',});

为我工作。希望这有帮助

示例：http://jsbin.com/iyewa5

Answer 3

只需这样做（按原样输入，无论你想在哪里创建对话框），

$('.my-selector').dialog({closeText: 'Close'});
$('span.ui-icon').css({'text-indent': '20px','overflow': 'visible', 'line-height': '16px'});
$('.ui-dialog-titlebar-close').css({'text-decoration':'none', 'right':'45px', 'height':'21px', 'width': '20px'});
$('.ui-widget').css({'font-size': '12px'});

这里我通过jQuery编辑API的CSS属性。

Answer 4

听起来你没有包含必要的jQuery UI CSS文件，或者有些路径设置不正确。看一下使用firebug的工作示例并检查以确保正确下载所有必需的文件并确保路径正确。

Answer 5

只需使用此CSS即可显示关闭图标：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    position: relative;
    right: 6px;
    top: 4px;
}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: 0px;
    text-indent: 4px;
    margin-left: 18px;
position: relative;
}

jQuery UI对话框 - 无法看到closeText

5 个答案: