javascript - 如何将关闭按钮放在jquery弹出的标题栏中

Question

这是 fiddle https://jsfiddle.net/evbvrkan/

这是一个非常大的元素，所以不能改变很多东西，现在的要求是将第二个弹出窗口的 x 按钮(来自单击“单击我 2”按钮)放在标题栏或任何使出现在第二个对话框中以关闭它的其他方法。

正如您在 CSS 中看到的那样，每个弹出窗口标题关闭图标都被禁用，我无法更改它。

我尝试了很多来自 stackoverflow 的解决方案，但没有任何效果，在对话框的标题栏或 X 符号中放置一个按钮

HTML

<div id="myFirstDialog">
    This is the content of my modal dialog box

</div>

<button id="clickMe">Click Me</button>

<div id="my2ndDialog" >
    This is the content of my 2nd modal dialog box

</div>

<button id="clickMe2">Click Me 2</button>

JS

$("#myFirstDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box"
   });

$('#clickMe').click(function() {
    $("#myFirstDialog").dialog("open");
});

$("#my2ndDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    buttons   : {
              'X' : function() {
                  $(this).dialog('close');
              }  
              }
   });

   $('#clickMe2').click(function() {
    $("#my2ndDialog").dialog("open");
});

CSS

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

Answer 1

使用 dialogClass 添加一个类到你想要显示关闭按钮的 ui 对话框，然后添加基于该类显示的 css:

https://jsfiddle.net/jmcjzkyv/