title: Recommendation for simple jquery dialog example?
body: <p>Searching all over for the keywords "simple jquery dialog example"  - with all the answers out there, I have not seen any simple and meaningful example in a succinct standalone .html document .  Even downloading several full books on jQuery, I didn't see any such an example.</p>
  
  <p>The examples I did find are for a dialog that shows an alert message "Hello World" .. not very useful for interaction. I think the real world example would be something that captures input and sends it back to the page without requiring to post back to the server.  The server post can be a subsequent step.</p>
  
  <p>Can anyone recommend a code reference along these lines?  Thanks</p>
  
  <p><strong>EDIT #3</strong></p>
  
  <p><em>I have pasted in a solution with a fresh post below.  It is a completely self-contained file, with ready-to-go includes.  It's working for me.</em></p>
  
  <p><strong>EDIT #2</strong></p>
  
  <p>I updated the head block to contain the missing css.  The dialog content is now not being shown, but still the dialog box is not opening .. and no errors in console.</p>
  
  <pre><code>                &lt;style&gt;
                  #dialog {
                          display:none;
                      }
                  &lt;/style&gt;
  </code></pre>
  
  <p><strong>EDIT ~ ATTEMPT #1</strong></p>
  
  <p>Based on the answer from @rob-schmuecker , I tried the following code below.  I see it work on jsFiddle, but my implementation is not working.  In my browser the console doesn't show any errors.  But there are two problems I'm seeing:</p>
  
  <ul>
  <li>dialog-box div content loads directly into the page</li>
  <li>clicking the load dialog button doesn't work</li>
  </ul>
  
  <p>Any idea what is wrong with this code? .. is it perhaps my jquery include calls?</p>
  
  <pre><code>    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  
        &lt;script type="text/javascript"&gt;
  
        //Initialize dialog
  
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
  
        //Open it when #opener is clicked
        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
  
        //When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
        $('.formSaver').on('click', function () {
            $('.myTarget').text($('.myInput').val());
            $("#dialog").dialog('close');
        });
  
        &lt;/script&gt;
  
                  &lt;style&gt;
                  #dialog {
                          display:none;
                      }
                  &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div&gt;Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display &lt;span class="myTarget"&gt;here&lt;/span&gt; when finished.&lt;/div&gt;
  
      &lt;div id="dialog" title="Basic dialog"&gt;
          &lt;p&gt;This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.&lt;/p&gt;
          &lt;input class="myInput" type="text" /&gt;
          &lt;button class="formSaver"&gt;Save me!&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;button id="opener"&gt;Open Dialog&lt;/button&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>