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.


        html
        
            
        
     

        html
        
            
        
     
<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:


        javascript
        
            
        
     

        javascript
        
            
        
     
$("#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


        kotlin
        
            
        
     

        kotlin
        
            
        
     
 return false;  // leave open

});

Class Members

Member		Description
	Show	A server side method that causes the dialog to be displayed when the page is reloaded. Effectively this server side trigger mechanism for the client side dialog, but remember that the operation of… 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. The handler receives this as the element clicked and e and inst parameter for the event and modal dialog instance…
	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…
	ScriptLocation	Location of the script file: WebResource, EmbeddedInPage or relative URL (~/images/wwScriptLibrary.js)
	zIndex

Example


        html
        
            
        
     

        html
        
            
        
     
<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>

Assembly: webcontrolsjquery.prg