This is the first time I am using the dialog box and

obviously I am doing something wrong.

 

I am not able to get the dialog to open.
Initially it is hidden with "autoOpen: false,".
In another a JS function I call SaveSuccessufll();
  but the dialog popup never pops up.

Any suggestions? 
Thanks

 

Code in the HTML:

      <div id="dialog-modal" title="Your data has been successfully saved.">
      Thank you for waiting!
      </div>

jQuery(document).ready(function() {

    $("#dialog-modal").dialog({ // jQuery UI Dialog test
        height: 140,
        autoOpen: false,
        modal: true,
        resizable: false,
        close: function(event, ui) { SavedDataUpdtParntFrm(); }
    });

  // more initialization code
  // more initialization code
  // more initialization code

 

// call after successfully save the data

function SaveSuccessufll() {
    alert("BEGIN  SaveSuccessufll");   <<< code reaches here
    $('#dialog-modal').dialog("open");   <<< never opens the dialog
    alert("END  SaveSuccessufll");     <<< code reaches here
}

function SavedDataUpdtParntFrm() {
    alert("BEGIN  SavedDataUpdtParntFrm"); <<< never gets here
    // more code here
    alert("END  SavedDataUpdtParntFrm");
    closePopup();
}