The wwModalDialog box can also be used as a pure HTML client control. The control works against an HTML element that should include at least one button or hyperlink to close the dialog. Optionally a cancel button can also be provided and both of these buttons can be hooked with event handlers that fire when the button is clicked.

Loading wwScriptLibrary.js
Note in order to use the client only code you'll need to include the wwScriptLibrary.js in your page. You can either directly link the script file from your site or use Westwind.Web.Controls.ControlResources.LoadwwScriptLibrary(this.Page) anywhere in your page.

Example setup:

<div id="MessageBox" class="blackborder" 
     style="width:350px;background:white;display:none;">
    <div class="gridheader" id="MessageBoxHeader">Header</div>
    <div style="padding:10px;">
        Content goes here<hr />
        <input type="button" id="CloseButton" value="Close Dialog"/> 
        <input type="button" id="CancelButton" value="Cancel Dialog"/> 
    </div>
</div>

<script type="text/javascript">

// *** Optionally apply a shadow and make draggable
new wwControl("MessageBox").showShadow(.45,8);
var MessageBox_DragBehavior = new wwDragBehavior("MessageBox","MessageBoxHeader");

function ShowDialog()
{
    var mp = new wwModalDialog("MessageBox","CloseButton","CancelButton");
    mp.overlayId = "overlay";
    mp.dialogHandler = OnDialogClick;
    mp.showDialog();
}
function OnDialogClick(Result,button)
{
   if (Result == 1)   // or: button.value == "Close Dialog"
      alert("Closed");
   else
      alert("Cancelled");
}
</script>    

Note that any of the buttons inside of the dialog can be either client or server buttons, but if you want to stay on the current page you should use client buttons as in the example. Server buttons will also clear the dialog but cause the page to post back.

For catching the cancel and ok handlers you can use buttons or links - basically any control that supports a click event which includes buttons and hyperlinks, but can be pretty much any HTML element since they all support click events.

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. Instead you can use the static wwModalDialog.createDialog() method to create a generic dialog from anywhere with a couple of lines of code.

// *** Create here inline or make this ref global
var Mbox = wwModalDialog.createDialog("Mbox",500,"Done","Cancel",MBox_Callback);
Mbox.showDialog(Result.message.htmlEncode(),"A callback error occurred");

An even more generic version is available with a single line of code:

wwModalDialog.messageBox("Here's my message<hr>More text",
           "Modal Dialod Sample"," Close "," Cancel ",Mbox_Callback);