Thursday, February 24, 2011

How to change the title of a jquery dialog

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