Class wwModalDialog

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

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

Member		Description
	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

See also: