title: Contents inside Popup Modal not showing up
body: <p>I am using <a href="http://www.queness.com/post/77/simple-jquery-modal-window-tutorial" rel="nofollow">this Tutorial</a> to show a Popup Modal Window on page load, For some reason it is not showing the contents &amp; image inside the Modal.</p>
  
  <p>Code  i am working on is at <a href="http://jsfiddle.net/HJUZm/2/" rel="nofollow">jsFiddle</a> </p>
  
  <p>I want a simple Modal popup on which i can show Message which are in form of image in different dimension, I want Modal to show in the middle of the page and adjust width &amp; height as per the image. I would appreciate help in this regard.</p>
  
  <p>CODE</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Simple JQuery Modal Window from Queness&lt;/title&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
          var id = $(this).attr('href');
          //Get the screen height and width
          var maskHeight = $(document).height();
          var maskWidth = $(window).width();
  
          //Set height and width to mask to fill up the whole screen
          $('#mask').css({'width':maskWidth,'height':maskHeight});
  
          //transition effect    
          $('#mask').fadeIn(1000);   
          $('#mask').fadeTo("slow",0.8);
  
          //Get the window height and width
          var winH = $(window).height();
          var winW = $(window).width();
  
          //Set the popup window to center
          $(id).css('top',  winH/2-$(id).height()/2);
          $(id).css('left', winW/2-$(id).width()/2);
  
          //transition effect
          $(id).fadeIn(2000);
  
      //if close button is clicked
      $('.window .close').click(function (e) {
          //Cancel the link behavior
          e.preventDefault();
          $('#mask, .window').hide();
      });    
  
      //if mask is clicked
      $('#mask').click(function () {
          $(this).hide();
          $('.window').hide();
      });        
  
      $(window).resize(function () {
  
          var box = $('#boxes .window');
  
          //Get the screen height and width
          var maskHeight = $(document).height();
          var maskWidth = $(window).width();
  
          //Set height and width to mask to fill up the whole screen
          $('#mask').css({'width':maskWidth,'height':maskHeight});
  
          //Get the window height and width
          var winH = $(window).height();
          var winW = $(window).width();
  
          //Set the popup window to center
          box.css('top',  winH/2 - box.height()/2);
          box.css('left', winW/2 - box.width()/2);
  
      });    
  });
  &lt;/script&gt;
  &lt;style&gt;
  
  /* Z-index of #mask must lower than #boxes .window */
  #mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
  }
  #boxes .window {
    position:fixed;
  
    display:none;
    z-index:9999;
    padding:20px;
  }
  /* Customize your modal window here, you can add background image too */
  #boxes #dialog {
  
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="boxes"&gt;
      &lt;!-- #customize your modal window here --&gt;
      &lt;div id="dialog" class="window"&gt;
          &lt;b&gt;Testing of Modal Window&lt;/b&gt; |
          &lt;!-- close button is defined as close class --&gt;
          &lt;a href="#" class="close"&gt;Close it&lt;/a&gt;
   &lt;br /&gt;
          &lt;img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" /&gt;
      &lt;/div&gt;
      &lt;!-- Do not remove div#mask, because you'll need it to fill the whole screen --&gt;
      &lt;div id="mask"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>