在jquery对话框中点击关闭按钮时关闭文本。

Question

为什么我的jquery对话框会同时显示“关闭”文本和图标？

如何移除“关闭”文本？

我正在使用：

<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />

- bart2puck

---

在关闭按钮上设置文本缩进 - Ben Temple-Heald

@BenTemple-Heald 是的，这就是我说的。 - Praveen Kumar Purushothaman

Answer 1

我猜您缺少一些必要的CSS文件。无论如何，您可以使用以下方法进行覆盖：

• 负文本缩进。
• 溢出隐藏。

给出这个CSS：

.close {
  text-indent: -99em;
  overflow: hidden;
}

- Praveen Kumar Purushothaman

---

这是我使用的jQuery中的一个bug吗？看起来很奇怪，我不得不编写代码来修复它... 根据您的编辑，您有什么CSS建议？我在问题中已经链接了CSS... - bart2puck

@bart2puck 像我之前说的那样，你可能错过了一些必需的CSS。你能否展示一个[mcve]来复制它？即使在原始应用程序页面中也存在吗？ - Praveen Kumar Purushothaman

Answer 2

来源：https://jqueryui.com/dialog/

<style>
    .ui-button-icon-only {
        width: 2em;
        box-sizing: border-box;
        text-indent: -9999px;
        white-space: nowrap;
    }
    </style>

Close button :    

<button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close">
    <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
    <span class="ui-button-icon-space"> </span>
    Close
</button>

- Ben Temple-Heald

Answer 3

我也遇到了这个问题。

我有一个包含Jquery库和Jquery UI库的shell页面。在第三方应用程序加载到我的shell页面后，他们捆绑的JavaScript库（其中包括不同版本的Jquery、Jquery UI和Bootstrap）与shell页面发生冲突。

然后，在我的shell页面中定义的弹出对话框与您提出的问题完全相同——重叠的关闭文本和X标志。

解决冲突对于我的情况来说太复杂了，最简单的解决方案似乎就是隐藏默认的关闭按钮并创建自定义按钮来进行关闭。

以下是隐藏关闭按钮的CSS：

    .ui-dialog-titlebar-close {
    visibility: hidden;
    }

- Yang

Answer 4

具体版本您使用的jquery-ui.css（1.10.3）不支持隐藏“关闭”文本的功能。 但是，您可以使用版本（1.12.0-beta.1）或任何后续版本来实现此功能。

例如，您可以包含以下链接标签：

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/cupertino/jquery-ui.css" />

这是隐藏文本的样式规则。

.ui-button-icon-only {
  width: 2em;
  box-sizing: border-box;
  text-indent: -9999px;
  white-space: nowrap;
}

要访问此版本中的所有样式规则，请访问以下网址： https://code.jquery.com/ui/1.12.0/themes/cupertino/jquery-ui.css

- Hazem Twair