title: Customizing jQuery UI dialog
body: <p>For learning jQuery UI dialog, I have the code defined below. </p>
  
  <p>I need to do following three tasks</p>
  
  <p>1) Use my image as “OK” button and “Cancel” button</p>
  
  <p>2) Use my custom image as the close button on right top end of dialog</p>
  
  <p>3) Background of the whole dialog should be “gray” (including title, and place for OK button.)</p>
  
  <p>The important point is the style should be applied only to my dialog. All other widgets should have default behavior. For content area, I could achieve it using #myDiv.ui-widget-content.</p>
  
  <p>Can you please suggest code for this? </p>
  
  <p>Note: Please use the best practices, if possible. (E.g. 1.  use a variable $myDialog 2. use autoOpen: false)</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt; &lt;/title&gt;
  
      &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"&gt;&lt;/script&gt;
  
  
   &lt;link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet" 
          type="text/css" /&gt;
  
  
       &lt;link href="Styles/OverrideMyDialog.css" rel="stylesheet" 
          type="text/css" /&gt;-
  
  
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          var $myDialog = $(".addNewDiv").dialog(
                                      {
                                          autoOpen: false,
                                          title: 'My Title',
                                          buttons: { "OK": function () {
                                              $(this).dialog("close");
                                              ShowAlert();
                                              return true;
                                          },
                                              "Cancel": function () {
                                                  $(this).dialog("close");
                                                  return false;
                                              }
                                          }
  
                                      }
                                             );
  
  
  
  
  
          $('#myOpener').click(function () {
              return $myDialog.dialog('open');
  
  
          });
      });
  
      function ShowAlert() {
          alert('OK Pressed');
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
      &lt;input id="myOpener" type="button" value="button" /&gt;
  &lt;/div&gt;
  &lt;div class="addNewDiv"  id="myDiv" title="Add new Person" &gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Name
              &lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Age
              &lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also, I made a css class to override the widget functionality only for my dialog</p>
  
  <pre><code>    /*
     *File Name: OverrideMyDialog.css
     * jQuery UI CSS is overriden here for one div
    */
  
  
  /* Component containers
  ----------------------------------*/
  
  #myDiv.ui-widget-content 
  { 
  border: 5px solid Red;
  background: Gray url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
  color: Green; 
  } 
  </code></pre>