Q:

Dialog box is not working

I have very simple code. I want to show dialog box whenever someone clicks hyperlink.
 <html lang="en">

 <head>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

 </head>
 <body>
 <form>
  <a id='theLink' href="#">Common Questions</a>

      <div id="dialogform1"  title="Common Questions" style ="display:none">

       <p> this is question 1 </p>

</div>
  </form>
  <script type="text/javascript">

$( document ).ready(function()  

     {

    $("#theLink").click(function(e) {

       $('#dialogform1').dialog("open"); 

    });

  });

    </script>

 </body>
 </html>

However , this does not open dialog box with the div content declared earlier.  I don't know what am I doing wrong here ?  I have spent quite few hours to find why is it happening but can't seem to find it.  It needs another eyes to look at problem.
Thank you for taking time and answering the question.

A:

Updated code:
Refer jQuery UI Dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <title></title>
</head>

<body>
    <form>
        <a href="#" id='theLink' name="theLink">Common Questions</a>
        <div id="dialogform1" style="display:none" title="Common Questions">
            <p>this is question 1</p>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#theLink").click(function (e) {
                $('#dialogform1').dialog();
                $('#dialogform1').dialog("open");
            });
        });
    </script>
</body>
</html>

