Here is an image that a user can click to get help
<img src="/Content/images/Help.png" style="cursor:pointer" onclick="javascript:ShowHelp('My Title')" />
Here is the jquery dialog
<div id="dialog-help" title="" style="background:white">
<div id="divHelpContents"></div>
</div>
Javascript function to set up the dialog
$(document).ready(function ()
{
//Help popup
$("#dialog-help").dialog({ autoOpen: false
, modal: true
, width: 415
, height: 300
, show: "blind" //animation effect
, hide: "clip" //animation effect
, draggable: true
, resizable: false
, buttons: {
Ok: function ()
{
$(this).dialog("close");
}
}
});
});
Here is a function that will update the title, help contents, and open the dialog
function ShowHelp(topic)
{
$("#dialog-help").dialog('option', 'title', topic);
$("#divHelpContents").html("Show some help contents here");
$("#dialog-help").dialog("open");
}
No comments:
Post a Comment