title: Open a modal dialog box, containing dynamic data on table cell click
body: <p>I'm trying to achieve as the title suggests. Currently I can display the contents of a <code>&lt;div&gt;</code> using:</p>
  
  <pre><code>document.write("&lt;table&gt;&lt;tr&gt;");
  ...
  document.write("&lt;td onclick=\"window.location.href='#popup'\" ... &gt;" + name + "\"&lt;/td&gt;);
  </code></pre>
  
  <p>With the <code>&lt;div&gt;</code> defined as: (where I'm trying to use <code>data-name</code>)</p>
  
  <pre><code>&lt;div id="popup" data-name="name" class="dialog"&gt;
  
      &lt;a href="#close"&gt;&lt;img src="..." alt="..." width="166" height="104" align="left" /&gt;&lt;/a&gt;
      &lt;p&gt;                
          Hello (dynamic name here)!     
      &lt;/p&gt;            
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried instead calling:</p>
  
  <pre><code>document.write("&lt;td onclick=\"popup(" + name + ")\" class=\"programme\"&gt;" + name + "&lt;/td&gt;");
  
  function popup(movieName)
  {
      var pop = document.getElementById("popup"); 
      pop.setAttribute("data-movie", movieName);
  
      document.location.href = "#popup";
  };
  </code></pre>
  
  <p>but I no longer see the popup this way.</p>
  
  <p>I would eventually want to "popup" to be a modal dialogue window which will display on top of the table. Currently as it's defined above the table it just pushes the table down when displayed.</p>
  
  <p><strong>Edit:</strong> Thanks for the fantasic help. Both @carlosHT and @TimeDead. Both solutions work and both taught me a lot. I've gone for carlosHT's solution as it's a smaller implementation. The only addition I had to add was:</p>
  
  <pre><code>.ui-dialog
  {
      clear: both;
  }
  </code></pre>
  
  <p>This stops the dialog window from having a very tall titlebar.</p>