title: jQuery custom UI dialog not working
body: <p>I am in the process of creating a little webpage based on the Periodic Table of Elements, and I'm trying to make it so that if one were to click on an element's square, a dialog box will pop up to display a list of compounds. I've ran into an issue with displaying a jQuery dialog box with a custom theme that I generated at jQuery's ThemeRoller, however - it merely appears as plain text at the top left corner, and as far as I know, I've supplied the necessary links to the associated JS and CSS files.</p>
  
  <p>I did have a working version beforehand, but I also have plans on using multiple themes for the dialog box (in the efforts to make them color-coded for the squares), and now trying to implement that has essentially thrown everything for a loop. Even scanning through the various other related questions on here has proven fruitless, not to mention the link to Filament's posting in regards to using multiple themes (<a href="http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/" rel="nofollow">http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/</a>). Currently I only have one theme active.</p>
  
  <p>Here is the code - I apologize for the clunky size (A table with 100+ cells is not exactly small...)</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
       &lt;head&gt;
       &lt;meta charset="UTF-8" /&gt;
       &lt;title&gt;The Periodic Table of Elements&lt;/title&gt;
       &lt;link rel="stylesheet" type="text/css" href="css/styles.css" /&gt;
       &lt;link rel="stylesheet" type="text/css" href="css/animate.css" /&gt;
       &lt;link rel="stylesheet" href="js/jquery-ui-1.10.3/themes/blue/jquery-ui.css"&gt;
       &lt;script type="text/javascript" src="js/jquery-1.10.2.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="js/jquery-ui-1.10.3/ui/jquery-ui.js"&gt;&lt;/script&gt;
  
       &lt;/head&gt;
  
       &lt;body&gt;
        &lt;h3&gt;The Periodic Table of Elements&lt;/h3&gt;
        &lt;div class="container"&gt;
         &lt;table width="100%" align="center" cellspacing="1px" cellpadding="1px"&gt;
          &lt;tr&gt;
           &lt;th&gt;&lt;p&gt;Group&lt;br/&gt;Period&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;1&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;2&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;3&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;4&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;5&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;6&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;7&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;8&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;9&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;10&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;11&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;12&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;13&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;14&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;15&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;16&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;17&lt;/p&gt;&lt;/th&gt;
           &lt;th&gt;&lt;p&gt;18&lt;/p&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
           &lt;td id="number"&gt;&lt;p&gt;&lt;b&gt;1&lt;/b&gt;&lt;/p&gt;&lt;/td&gt;
           &lt;td&gt;
               &lt;div class="element" id="hydrogen" style="background: #6699FF;"&gt;
               &lt;div class="number"&gt;&lt;h6&gt;1&lt;/h6&gt;&lt;/div&gt;
               &lt;div class="symbol"&gt;&lt;h4&gt;H&lt;/h4&gt;&lt;/div&gt;
               &lt;div class="weight"&gt;&lt;h5&gt;1.008&lt;/h5&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
           &lt;td colspan="16"&gt;&lt;p&gt;Click on an element square to view associated compounds:&lt;/p&gt;&lt;/td&gt;
           &lt;td&gt;
               &lt;div class="element" id="helium" style="background: #FFCC33;"&gt;
               &lt;div class="number"&gt;&lt;h6&gt;2&lt;/h6&gt;&lt;/div&gt;
               &lt;div class="symbol"&gt;&lt;h4&gt;He&lt;/h4&gt;&lt;/div&gt;
               &lt;div class="weight"&gt;&lt;h5&gt;4.0026&lt;/h5&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
           &lt;td id="number"&gt;&lt;p&gt;&lt;b&gt;2&lt;/b&gt;&lt;/p&gt;&lt;/td&gt;
           &lt;td&gt;
               &lt;div class="element" id="lithium" style="background: #6699FF;"&gt;
               &lt;div class="number"&gt;&lt;h6&gt;3&lt;/h6&gt;&lt;/div&gt;
               &lt;div class="symbol"&gt;&lt;h4&gt;Li&lt;/h4&gt;&lt;/div&gt;
               &lt;div class="weight"&gt;&lt;h5&gt;6.94&lt;/h5&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
           &lt;td&gt;
               &lt;div class="element" id="beryllium" style="background: #6699FF;"&gt;
               &lt;div class="number"&gt;&lt;h6&gt;4&lt;/h6&gt;&lt;/div&gt;
               &lt;div class="symbol"&gt;&lt;h4&gt;Be&lt;/h4&gt;&lt;/div&gt;
               &lt;div class="weight"&gt;&lt;h5&gt;9.012&lt;/h5&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
           &lt;td colspan="10"&gt;&lt;/td&gt;
           &lt;td&gt;
               &lt;div class="element" id="boron" style="background: #FFCC33;"&gt;
               &lt;div class="number"&gt;&lt;h6&gt;5&lt;/h6&gt;&lt;/div&gt;
               &lt;div class="symbol"&gt;&lt;h4&gt;B&lt;/h4&gt;&lt;/div&gt;
               &lt;div class="weight"&gt;&lt;h5&gt;10.81&lt;/h5&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
           &lt;!-- I edited out the rest because it went 2000 characters ABOVE the limit...
  but it should supply the general idea. --&gt;
          &lt;/tr&gt;
         &lt;/table&gt;
        &lt;/div&gt;
  
        &lt;div class="dialog" title="Element Info:"&gt;
          &lt;p&gt;Content&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;script&gt;
          $(document).ready(function() {
              var blue = $(".dialog");
              blue.dialog(
              {
                  width: 400,
                  height: 500,
                  autoOpen: false,
                  buttons: {
                      "OK": function() {
                          $(this).dialog("close");
                      }
                  }
              });
              $(".dialog").hide();
  
              $(".element").click(function(){
  
                  $(".dialog").dialog("open");
              });
  
  
          });
        &lt;/script&gt;
  
       &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>