在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" />

Answer 1

来源：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>

Answer 2

我猜你错过了一些必需的CSS文件。但无论如何，你可以通过使用：

来超越

• 否定文字缩进。
• 隐藏溢出。

给这个CSS：

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

Answer 3

我也有这个问题。

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

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

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

这是隐藏关闭按钮的CSS

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