用模态窗口中的按钮替换关闭图标答案

【问题标题】：Replacing Close Icon with a Button in Modal Window用模态窗口中的按钮替换关闭图标
【发布时间】：2017-10-16 17:10:45
【问题描述】：

我正在使用 JQuery UI 打开模态窗口。现在模态窗口在标题栏的右侧有一个 X 图标来关闭模态窗口。如果可能的话，我想用带有标签关闭的按钮替换 X 图标。我不知道如何做到这一点。

【问题讨论】：

请点击<>并创建一个minimal reproducible example，这样我们就不必这样做了。然后检查 clos，获取类并自己设置样式
向我们展示您的模态代码是什么样的，以及到目前为止您尝试过什么（如果有的话）。

【解决方案1】：

想要扩展@freginold 提供的代码，这是一个非常有效的解决方案。

$(function() {
  var $dlg = $("#dialog").dialog({
    classes: {
      "ui-dialog": "close-label"
    }
  });

  $(".close-label .ui-dialog-titlebar-close")
    .removeClass("ui-button-icon-only")
    .css({
      height: "auto",
      width: "auto",
      "text-indent": 0,
      padding: "0 .2em"
    })
    .html("Close");
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog" title="Basic Dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

【讨论】：

@CarlosSosa 很高兴听到这个消息。我希望您将其中一个标记为您使用的答案。

【解决方案2】：

由于 jQuery UI 设置关闭按钮的方式，默认情况下您可能使用 closeText 属性设置的任何文本都不可见。（有关更多信息，请参阅jQuery UI dialog widget page。）

但是，您可以覆盖 jQuery UI CSS 规则以在关闭按钮中显示文本。下面是一个示例：

$(function() {

  $("#dialog").dialog(); // create dialog modal

  var xBtn = document.getElementsByClassName("ui-icon-closethick")[0].parentNode;
  xBtn.style.height = "auto";
  xBtn.style.width = "auto";
  xBtn.style.textIndent = 0;
  xBtn.innerHTML = "Close"; // set close button text

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

您可以对关闭按钮应用其他样式，使其显示为您想要的样子——填充、边距、字体等。这只是一个基本示例。

如果您想自定义此示例，请将关闭按钮的文本分配给 xBtn.innerHTML。

【讨论】：

非常感谢@freginold。这真的很有帮助。