Recommendation for simple jquery dialog example?

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.

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.

Can anyone recommend a code reference along these lines? Thanks

EDIT #3

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.

EDIT #2

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.

                <style>
                #dialog {
                        display:none;
                    }
                </style>

EDIT ~ ATTEMPT #1

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:

dialog-box div content loads directly into the page
clicking the load dialog button doesn't work

Any idea what is wrong with this code? .. is it perhaps my jquery include calls?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">

      //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');
      });

      </script>

                <style>
                #dialog {
                        display:none;
                    }
                </style>

    </head>
    <body>

    <div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        <input class="myInput" type="text" />
        <button class="formSaver">Save me!</button>
    </div>

    <button id="opener">Open Dialog</button>

    </body>
    </html>

Solution

I appreciate everyones' answers - and I saw them all work online in JsFiddle and jqueryui.com. For what I was going after, so far as I can tell, here's the most concise solution I was able to get going, using all remote includes and based on the solution at java2s.com:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">

    <script type="text/javascript">
    $(function() {

        // Allows user to click Enter key in text field and it will submit the dialog
        $('#myDialog').keypress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
                getResponse();
            }
        });

        var cancel = function() {
            $("#myDialog").dialog("close");
        }

        var getResponse = function() {
            var answer;
            /*// for radio-button selection
            $("input").each(function(){
              (this.checked == true) ? answer = $(this).val() : null;
            });
             */

            answer = $("#first_name").val();

            // This adds it dynamically
            // $("<p>").text(answer).insertAfter($("#poll"));
            $("#result").text(answer);
            $("#myDialog").dialog("close");
        }

        var dialogOpts = {
            modal : true,
            closeOnEscape : true,
            buttons : {
                "Done" : getResponse,
                "Cancel" : cancel
            },
            autoOpen : false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
            $("#myDialog").dialog("open");
        });
    });
    </script>

</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
      <br/>
      First Name: <input type="text" id="first_name" />

    </div>

    <div style='color: green;' id='result'>
    </div>

</body>
</html>