Check out this fiddle: https://jsfiddle.net/evbvrkan/
This project is quite comprehensive, so making major changes isn't possible. However, the requirement now is to find a way to place the close button for the second pop-up (which appears when you click the "Click me 2" button) in the title bar or any other method that allows it to be displayed on the 2nd dialog and used to close it.
As you can see in the CSS, the close icons for each of the pop-ups are disabled, and unfortunately I cannot modify that setting.
I have attempted several solutions from Stack Overflow, but none of them have worked for adding a button or an X sign to the title bar of a dialog.
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;
}