how to put the close button in the title bar of jquery pop up

Question

Here is the fiddle https://jsfiddle.net/evbvrkan/

This is a very big project so can't change many things, now the requirement is to put the x button of the second pop up(which comes from clicking the 'Click me 2 ' button ) in the title bar or any other way of making the appear on the 2nd dialog to close that.

As you can see in the CSS that every pop-ups title close icon is disabled, I cant change that.

I tried many of the solution from stackoverflow and nothing worked , to put a button in title bar of a dialog or X sign

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

Add a class using dialogClass to the ui dialog you want to show the close button and then add css to show based on that class:

https://jsfiddle.net/jmcjzkyv/