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" 
    ContentId="MessageBoxContent" 
    OkButtonId="MessageBoxClose"
    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' />
    </div>
</ww:wwModalDialog>

wwWebControl
  wwWebPanel
    wwWebDragPanel

Remarks

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:

$("#imgWorking").modalDialog()

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

return false; // leave open
});

Class Members

MemberDescription

Show

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

o.Show(Message,Title,isHtml)

BackgroundOpacity

The background Opacity for the overlay

CancelButtonId

Optional Cancel Button Id

ContentId

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

HeaderId

The id of the dialog header.

OnClientDialogClick

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

OverlayId

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.

ScriptLocation

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

zIndex

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

Example

<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.
    </div>
    <hr />
    <input type='button' id='MessageBoxOk' value='Ok' />
    <input type='button' id='Button1' value='Cancel' />
</div>
</ww:wwModalDialog>

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

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

// 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;
}
</script>

Requirements

Assembly: webcontrolsjquery.prg

See also:

modalDialog jQuery Plugin

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