One important aspect of modal dialogs is the ability to detect when the dialog is closed or completed. To deal with this the HoverPanel plug-in detects any clicks inside of the dialog control and fires the dialogHandler event in response to the click. You can hook up a handler functino which should then return true to close the dialog or false to leave it open.

From the server control the ClientDialogHandler property can be set to point at the JavaScript function that is called in response to clicks. This translates to the same dialogHandler property on the plug-in in client script code.

Note that ANY clicks are forwarded to this handler including client control clicks so a typical event handler implementation should check for specific button or element ids when handling events.

$("#divDialog1")
   .modalDialog( { dialogHandler: function(evt) { 
       // this is the element clicked
       if (this.id == "btnOK")
          return true;  // close dialog

       return false; // don't close dialog
   });

Note that this in the handler is always the control that was clicked. An evt object is also passed by parameter in case you need it.

Here's a more realistic example that handles dialog input that is checked and updates page content based on input provided:

function onMessageBox2ClientClick(evt) {
    var btn = this;  // this == element clicked
    var text = $("#txtInputName").val();
    
    if (btn.id == "MessageBox2Ok") {
        if (text == "")
        {
            $("#MessageBox2Message").text("C'mon don't be shy - enter something");
            return false; // don't close
        }
        $("#divNameResult").text("You entered: " + text).show();
        return true;  // close dialog
    }
    if (btn.id == "MessageBox2Cancel") {
        $("#divNameResult").text("You cancelled the dialog").show();
        return true;  // close dialog
    }
    
    // dialog is not closed
    return false;
}