Example setup:
<div id="divModal" class="blackborder" style="width:350px;background:white;display:none;"> <div class="gridheader" id="divModal_Header">Header</div> <div class="containercontent" id="divModal_Content> Content goes here<hr /> </div> <div style="margin: 5px 15px"> <input type="button" id="CloseButton" value="Close Dialog"/> <input type="button" id="CancelButton" value="Cancel Dialog"/> </div> </div>
To simply show a modal dialog with the text as it is in the static layout you can use:
$("#divModal").modalDialog();
To show the dialog with some custom text dynamically created from JavaScript you need to do a little bit more work to specify which controls contain content and header.
$("#divModal").modalDialog({ contentId: "divModal_Content", headerId: "divModal_Header" }, contentText, headerText);
$("#divModal").modalDialog({ dialogHandler: function(evt, inst) { if (this.id == "CloseButton") { // do something - assign value, update ui etc. $("#txtName").val(""); // clear out text for name return true; // close } if (this.id == "CancelButton") return true; // just close return false; // don't close the dialog });
// *** Generic Message box with static client modal dialog function GenericButtonClick() { $.modalDialog("This dialog is generic, was created on the fly and requires no page elements.", "Generic Modal Dialog ", ["OK", "Cancel", "Otherwise"], function() { var div = $("#divGenericButtonResult"); var txt = $(this).val(); if (txt == null) return false; // don't exit div.text("You clicked on: " + txt).show(); return true; // }, false); }
This generic version creates a simple dialog box and allows you to specify any number of buttons on the bottom by passing button captions in the caption strings as an array. The handler can then look at the captions (button value) to decide which button was pressed (or by id as _BTN_0, _BTN_1, _BTN_2).