To define a wwModalDialog drop a wwModalDialog control onto an ASP.NET page. The dialog displayed in the first figure above is created with the following server side control code:

<ww:wwModalDialog ID="MessageBox" runat="server" 
    ContentId="MessageBoxContent" HeaderId="MessageBoxHeader"
    OkButtonId="MessageBoxOk"  
    DragHandleId="MessageBoxHeader" Draggable="true" 
    FadeinBackground="True" Closable="True"
    OnClientDialogClick="mbox_Click"
    Style="background: white; display:none;" 
    Width="400px" cssclass="blackborder"  
>
    <div id='MessageBoxHeader' class='gridheader' style="padding:4px">Web Connection</div>
    <div style='padding: 10px;'>
        <div id='MessageBoxContent' style="padding:10px;">
        </div>
        <hr />
        <input id='MessageBoxOk' type='button' value='Close' />
    </div>
</ww:wwModalDialog>

This creates a Modal Dialog control called MessageBox, which contains a header (MessageBoxHeader) and content (MessageBoxContent) area which are assigned to the control as HeaderId and ContentId respectively. When the control is first dropped it doesn't contain HeaderId and ContentId tags, and it drops the header and content areas without IDs assinged. You'll need to assign the names and Id mappings manually. You'll also want to assign an appropriate style to the dialog header so it stands out and assign an explicit width to the control. The style shown above gets dropped by default: You'll want insure that the control has a solid color background and that it is not initially displayed (display:none) as it's made visible only through the showDialog() activation method.

The content of the control is used as a layout template that displays the HTML of the template. The content can be made up of pure HTML or it can contain ASP.NET server controls.

The content typically should contain:

• A dialog header area
  
• A content area
  
• One or two HTML Control buttons to exit the dialog
  

A wwModalDialog server control actually renders a client side class and in order to display the modal dialog you need to invoke a method on that client side class. The class is created with the same name as the server side ID - in this case MessageBox. To open the dialog box in a button click you'd do something like this:

<input type="button" value="Show" onclick="MessageBox.showDialog()" />

This displays the dialog as is - IOW, the same way you designed without assigning anything into the content or header areas. If you'd rather display a custom message you can call showDialog like this:

MessageBox.showDialog("Title","This is a custom message");

The client side wwModalDialog object has a number of properties which you can also customize via client code. When using the server control it generates an instance of the client control and assigns the server set properties to the client control. You can then further manipulate the client side object settings in your client code.

Controlling the Overlay Background

You can control the overlay used by providing a custom Html element - typically a <div> - and styling it to your liking. For example the example in the previous topic used a background image of a windsurfer and a blue background. To do this you set up an invisible <div> in the background:

<!-- Overlay background div used for stylized background of second Message Box -->
<div id="overlay"
style="background-color:steelblue;background-image:url(images/sailbig.jpg);
background-attachment:fixed;background-repeat:no-repeat;display:none"></div>

You then set the OverlayId of the wwModalDialog control to 'overlay' and now the control uses this <div> control as the HTML element to provide the overlay.

Button Clicks and the Modal Dialog

Typically when you create a modal dialog you'll need to have at least one button to close or confirm the dialog. You can have two buttons that are 'handled' by the control and assign those to the OkButtonId and CancelButtonId. These buttons should be HTML controls that fire client side events. When assigned these buttons are hooked up to the client side event handler you specify in the OnClientDialogClick.

You should have at least one button configured so there's a way to close the dialog, but OnClientDialogClick is optional. If you don't provide it and click either the OkButtonId or CancelButtonId button the dialog is closed.

If you've specified that the dialog is Closable you'll also see a red box in the upper right corner and you can click on the red box to close the dialog. Keep in mind though that this option only closes the dialog and fires no events.

The client handler receives two parameters: A result code (1 (Ok) or 2 (Cancel) for the button number) and an instance of the clicked button so you can read the caption of the button. A handler might look like this:

function mbox_Clicked(Result,button)
{
   if (Result == 1)   // or button.value="Ok"
        // Success
      else
        //  aborted
}

Using the Server Side Show method

In addition to pure client side operation you can also use the server side .Show() method to display modal dialog. Calling .Show() on the server will cause the page to load and immediately display the modal dialog after the client page has completely loaded. This can be useful if you want a server driven dialog box.

If you are using server driven modal dialogs you probably will also want to use Server side button controls to handle submissions and you can easily do that simply by including server side buttons in your content. These buttons will then cause the page to post back immediately. If you do this you typically will not define any client side buttons. A server only driven dialog might look like this:

<ww:wwModalDialog ID="MessageBox2" runat="server" 
    ContentId="MessageBox2Content" HeaderId="MessageBox2Content" 
    OverlayId="overlay" BackgroundOpacity=".70"
    DragHandleId="MessageBox2Header" Draggable="true" Closable="true"            
    Style="background: white; display:none;" cssclass="blackborder"
    Width="400px"
>
    <div id='MessageBox2Header' class='gridheader' style="padding:2px;">The Name Game</div>
    <div style='padding: 10px;'>
        <div id='MessageBox2Content'>
        Enter your name:<br />
        <input type="text" style="width:300px;" id="txtInputName" />
        <hr />
        <asp:Button id='MessageBox2Ok' runat="server" Text='Save' />
        <asp:Button id='MessageBox2Cancel' runat="server" Text='Cancel' />
        </div>
    </div>
</ww:wwModalDialog>

Notice there are no client buttons and OkButtonId is not defined, so the only way to exit this dialog will be through the ASP buttons which in turn cause a server postback.