This control provides a popup window that pops on top of all other content in the browser and overlays the content with an transparent, but darkened overlay in effect providing a modal dialog. Modal dialogs are nice to replace ugly alert() boxes in client side code, but they can also be used to create more complex user entry forms that must be completed before proceeding.

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.

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)
{
   if (Result == 1)
      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 is pretty much everything.

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);