jQuery UI对话框 – 无法看到closeText
我正在尝试制作一个简单的对话框 – 没有标题只是’关闭’这个词和右上角的X. 我的文字等将在下面。
但是我摆弄它我无法显示closeText属性 – 我可以在FireBug中看到它，但它不会出现，或者X图形下面会出现几个字符。
实际上问题是jQuery UI CSS和jQuery Dialog本身。
jQuery UI Dialog使用closeText传入的任何内容执行以下closeText 。
- 它会创建一个包含
closeText的 - 在其上设置样式
ui-icon和ui-icon-closethick‘
实际上始终创建跨度，无论您是否传入closeText 。 它用于显示x -closing-image。
现在查看我们为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( ''+ closeSpan.text()+ '' );
请查看此http://jsbin.com/ibibe/以获取工作示例
这个post有点旧……在搜索此问题的解决方案时通过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
只需这样做（按原样输入，无论你想在哪里创建对话框），
$('.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属性。
听起来你没有包含必要的jQuery UI CSS文件，或者有些路径设置不正确。 看一下使用firebug的工作示例并检查以确保正确下载所有必需的文件并确保路径正确。
只需使用此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; }