jQuery UI modal dialog hangs before closing

Question

When I click the "Yes" button on the dialog box, it will stay on screen for 5-10 seconds until the startProcess() function completes. Shouldn't the dialog close before startProcess() begins? I'd like the dialog to respond right away by closing instead of waiting for the startProcess() to complete.

  $("#dialog-confirm").dialog({ dialogClass: 'no-close', resizable: false, autoOpen: false, maxWidth: 600, width: 400, fluid: true, height: 'auto', modal: true, buttons: { "Yes": function() { $(this).dialog("close"); startProcess(); return true; }, No: function() { $(this).dialog("close"); return false; } } }).css("font-size", "14px"); 

Answer 1

You need to make startProcess() run asynchronously. You could do:

"Yes": function() {
    $(this).dialog("close");
    setInterval(startProcess, 1);
    return true;
},

.dialog("close") simply hides the dialog in the DOM. But the browser doesn't update the display based on the DOM until the function returns.