
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>
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 dialogreturn false; // leave open
});
Class Members
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.prgSee also:
modalDialog jQuery Plugin© West Wind Technologies, 1996-2024 • Updated: 04/13/13
Comment or report problem with topic