How to get the jQuery dialog close button to actually close?

Hello,
I have a jQuery dialog box that pops up when the user hits my next button. I renamed "next" to "save & continue" and wanted to give users extra reassurance that their answers are being recorded and also give them an option to leave the survey (it's tldr; as to why so I won't get into that here).

!

The issue is that when you hit "save & continue," while the dialog box does show up, the fact that the background is kind of reloading with all the stuff/warnings to remind you there are required questions you haven't answered yet, prevents the close button from working. I don't mean the X on the top right, but an actual close button ("Continue Survey) after your message.

```
jQuery('input[id=NextButton]').click(function(event){
console.log('next btn clicked');
var mytext = jQuery('#myText').val();
jQuery('<div id="confirm-dialog">'+mytext+'</div>').appendTo('body');
jQuery("#confirm-dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
jQuery("#confirm-dialog").remove();
},
buttons: {
"Continue Survey": function(event, ui) {
jQuery('.ui-dialog').dialog('close');
},
"Leave Survey for Now": function(event, ui) {
window.location.href='url here';
}
}
});
jQuery('#confirm-dialog').dialog('open');

});

```

I tried event.preventDefault; and event.stopPropagation, but they didn't work. I tried event.stopImmediatePropagation which worked but then also stopped the user from being able to actually go to the next page.

I'd rather have people be able to click on the Continue Survey option rather than the X, since I have the other button.

Any ideas? The X button works, as does the "Leave Survey for Now."

Thank you!