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

Question

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

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

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