Question

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

Answer 1

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

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

＆＃13;

$(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

});

＆＃13;

<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>

＆＃13;

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

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

Answer 2

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

＆＃13;

$(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");
});

＆＃13;

<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>

＆＃13;

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

2 个答案: