jQuery dialog: How to use?

I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test Dialog</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <p><a href="javascript:void(null);" onclick="showDialog();">Open</a></p>

  <div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>

  <script type="text/javascript">
    function showDialog()
    {
      $("#dialog-modal").dialog(
      {
        width: 600,
        height: 400,
        open: function(event, ui)
        {
          var textarea = $('<textarea style="height: 276px;">');
          $(textarea).redactor({
              focus: true,
              autoresize: false,
              initCallback: function()
              {
                  this.set('<p>Lorem...</p>');
              }
          });
        }
      });
    }
  </script>
</body>
</html>

The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.

One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?

Solution

I think, you forgot to add jquery UI.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test Dialog</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="path_to_jq_ui"></script>

</head>
<body>
  <p><a href="javascript:void(null);" onclick="showDialog('Lorem ipsum dolor');">Open</a></p>

  <div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>

  <script type="text/javascript">
    function showDialog(text)
    {
      $("#dialog-modal").html(text)
      $("#dialog-modal").dialog(
      {
        width: 600,
        height: 400,
        open: function(event, ui)
        {
          var textarea = $('<textarea style="height: 276px;">');
          $(textarea).redactor({
              focus: true,
              autoresize: false,
              initCallback: function()
              {
                  this.set('<p>Lorem...</p>');
              }
          });
        }
      });
    }
  </script>
</body>
</html>

Here is working fiddle: http://jsfiddle.net/bY3F4/3/

Download JqueryUI from here

Edit: Dynamic dialog content added to code