Class wwModalDialog

This control provides a modal popup dialog by overlaying a transparent pane over the content and displaying an HTML based dialog box.

The control is made up of several components: The dialog itself, a content area where messages are displayed and an ok and optional cancel button that close the 'dialog'.

The control creates a client side instance of the wwModalDialog class which is accessible by the control's name. To invoke the dialog simply call the showDialog() method of this instance with the text to display in the content area.

<ww:wwModalDialog ID="MessageBox" runat="server" 
    CssClass="dialog boxshadow" Style="background: white; border-width: 0; position: absolute">
    <div id='MessageBoxHeader' class="dialog-header">Header</div>
    <div id='MessageBoxContent' class="dialog-content">
        <input id='MessageBoxClose' type='button' value='Close Dialog' />



This control uses the modalDialog jQuery plugin underneath the covers, so it's essentially driving JavaScript code. You can also easily use the modalDialog jQuery plugin directly with any dialog without having to use this control.

For example, the following displays an image in the center of the page over the darkened background:


Or you can access a dialog
$("#divMessageDialog").modalDialog( { dialogHandler: function() {
var btnText = $(this).val();
var btnId =;
if (btnId == "btnOk")
return true; // close dialog

return false; // leave open

Class Members



A server side method that causes the dialog to be displayed when the page is reloaded.



The background Opacity for the overlay


Optional Cancel Button Id


The Id of the area inside of the dialog that is used to display the content.


The id of the dialog header.


Client Event handler that is fired when anything inside of the dialog is clicked.


Optional client Id for the overlay element. If not provided one is created on the fly.
Use this to customize the display attributes of the overlay like background color/image
or any custom layout you might want for the background overlay.


Location of the script file: WebResource, EmbeddedInPage or relative URL (~/images/wwScriptLibrary.js)


Optional zIndex value that sets the overlay and dialog to the top of the window stack


<input type="button" id="btnShowMsgBox" name="btnShowMsgBox" value="Show Modal Dialog" />

<ww:wwModalDialog ID="MessageBox" runat="server" 
    CssClass="dialog boxshadow" OnClientDialogClick="onMessageBoxClick"              
    Style="background: white; display: none; border-width:0; width: 400px;">
<div id="MessageBoxHeader" class="dialog-header">Header</div>
<div style="padding: 10px;">
    <div id="MessageBoxContent" class="dialog-content">
        Hello Cruel World.
    <hr />
    <input type='button' id='MessageBoxOk' value='Ok' />
    <input type='button' id='Button1' value='Cancel' />

<script type="text/javascript">
$().ready( function() {
   showStatus({ autoClose: true });

   // hook up click event to button
   $("#btnShowMsgBox").click(function () {;

// the handler called when on of the buttons is clicked
function onMessageBoxClick()
   var button = $(this).val();
   showStatus("You clicked: " + button,3000);

   if (button == "Ok")
       return true;

    // don't close
   return false;


Assembly: webcontrolsjquery.prg

See also:

modalDialog jQuery Plugin

© West Wind Technologies, 1996-2022 • Updated: 04/13/13
Comment or report problem with topic