title: trying to give some css styles and better positioning to the code
body: <p>I am using the following code and it works well but with few exceptions: </p>
  
  <ol>
  <li><p>Unable to move to the position based upon the screen resolution and div height and width, basically if the contents are low, it is hising it self after showing a small portion and cutting off the remaining. </p></li>
  <li><p>Trying to make the [X] to stay at the top right corner always even if the size of the div box is small or big </p></li>
  <li><p>better css styling for the contents: </p></li>
  </ol>
  
  <p>Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('a.structureTypes').click(function() {
      var id = $(this).attr('data-value');
      var boxID = $(this).attr('data-id');
      $("#Structure" + boxID).fadeIn('slow');
  });
  $('.cancelStruct').click(function() {
      var boxID = $(this).attr('data-cancel');
      $('#Structure' + boxID).hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box1 {
      background: #fff none repeat scroll 0 0;
      border: 1px solid #ccc;
      color: #000;
      display: none;
      font-size: 12px !important;
      height: 100px;
      opacity: 0.6;
      position: absolute;
      width: 100px;
      z-index: 100;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="Structure2" align="center" style="display: none; background: red;"&gt;
      &lt;table align="center" style="
          background: white;
          "&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Test Page 1&lt;br/&gt;test page2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;button type="button" data-cancel="2" class="cancelStruct"&gt;X&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://prntscr.com/cndank" rel="nofollow">http://prntscr.com/cndank</a></p>