The ModalDialog control also comes a jQuery plug-in so it can be used without any server side support. The basic principle of the modalDialog functionality is that you can take any Html DOM element and pop it up ontop of the opaque background simply by selecting it with a selector and applying the .modalDialog() jQuery plug-in logic.

Example setup:

<div id="divModal" class="blackborder" 
     style="width:350px;background:white;display:none;">
    <div class="gridheader" id="divModal_Header">Header</div>
    <div class="containercontent" id="divModal_Content>
        Content goes here<hr />
    </div>
    <div style="margin: 5px 15px">
        <input type="button" id="CloseButton" value="Close Dialog"/> 
        <input type="button" id="CancelButton" value="Cancel Dialog"/> 
     </div>
</div>

To simply show a modal dialog with the text as it is in the static layout you can use:

$("#divModal").modalDialog();

To show the dialog with some custom text dynamically created from JavaScript you need to do a little bit more work to specify which controls contain content and header.

$("#divModal").modalDialog({ contentId: "divModal_Content", headerId: "divModal_Header" }, 
                             contentText, headerText);

Handling Button or Element Click Events

To handle clicking on buttons - or really any clicks within the dialog - you can hook up the dialogHandler property in the options. The handler is a function that receives the current element as the this pointer and the event and hover panel instance as parameters.

$("#divModal").modalDialog({ dialogHandler: 
	function(evt, inst) { 
		if (this.id == "CloseButton") {
			// do something - assign value, update ui etc.
			$("#txtName").val("");  // clear out text for name

			return true;  // close
		}
		if (this.id == "CancelButton")
			return true; // just close		

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

ModalDialog without pre-existing HTML layout

You can also show a modal popup with a generic display that doesn't require a pre-existing layout. You can use the static $.modalDialog() function which lets you display a messagebox that's laid out in a generic fashion.

// *** Generic Message box with static client modal dialog
function GenericButtonClick() {            
    $.modalDialog("This dialog is generic, was created on the fly and requires no page elements.",
                   "Generic Modal Dialog ",
                   ["OK", "Cancel", "Otherwise"],
                   function() {
                       var div = $("#divGenericButtonResult");
                       var txt = $(this).val();                               
                       if (txt == null)
                           return false; // don't exit

                       div.text("You clicked on: " + txt).show();
                       
                       return true; // 
                   }, false);
}

This generic version creates a simple dialog box and allows you to specify any number of buttons on the bottom by passing button captions in the caption strings as an array. The handler can then look at the captions (button value) to decide which button was pressed (or by id as _BTN_0, _BTN_1, _BTN_2).