在 jquery 对话框中的关闭按钮上关闭文本答案

【问题标题】：Close text on close button in jquery dialog在 jquery 对话框中的关闭按钮上关闭文本
【发布时间】：2017-06-28 15:17:06
【问题描述】：

是什么导致我的 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" />

【问题讨论】：

在关闭按钮上设置文本缩进
@BenTemple-Heald 是的，我就是这么说的。

标签： jquery dialog

【解决方案1】：

我猜您缺少一些必需的 CSS 文件。但无论如何，您可以使用以下命令覆盖：

否定文本缩进。
溢出隐藏。

给出这个 CSS：

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

【讨论】：

这是我正在使用的 jquery 中的错误吗？似乎很奇怪，我必须编写代码来修复它...根据您的编辑，知道我应该使用什么 css 吗？我在问题中有链接的css...
@bart2puck 正如我所说的，您可能缺少一些必需的 CSS。你能告诉我们一个minimal reproducible example 来复制它吗？它甚至在原始应用程序的页面中吗？

【解决方案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>

【讨论】：

【解决方案3】：

我也有这个问题。

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

然后我的 shell 页面中定义的弹出对话框与您的问题中显示的问题完全相同 - 重叠的关闭文本和 X 符号。

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

这是隐藏关闭按钮的 CSS

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

【讨论】：