如何將關閉按鈕放在jQuery的標題欄中彈出

Question

這是小提琴https://jsfiddle.net/evbvrkan/

這是一個非常大的項目，因此不能更改很多內容，現在的要求是將第二個彈出窗口的x按鈕（來自單擊“ Click me 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/