title: How do I autosize a blockui dialog to the available visible area with JQuery?
body: <p>I need to resize a div shown as a message in blockUI so that it fills the visible screen area less some hardcoded fudge factor (so width - 100 say). The premise is that I can show a smaller image on the screen but if the user needs an enlarged image then I just show them block ui dialog sized to their screen.</p>
  
  <p>The image is dynamically generated so can be sized to whatever dimensions are passed to it from the application.</p>
  
  <p>I've looked and have only found code for centering a div. I'm working on this so if I find an answer I'll post it here (assuming it doesn't replicate anyone elses answers!)</p>
  
  <p>Here's a very simple html snippet for the calling markup:</p>
  
  <pre><code>&lt;div&gt;
     &lt;img src="someurl" class="image" height="280px" width="452px" alt="" /&gt;
  &lt;/div&gt;
  &lt;div style="text-align: right;"&gt;
     &lt;a href="#viewpopup" id="viewpopup"&gt;View larger map&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the popup markup</p>
  
  <pre><code>&lt;div id="popup"&gt;
     &lt;div class="titlebar"&gt;
        &lt;div class="title left"&gt;Map details&lt;/div&gt;
        &lt;div class="closebuttons right"&gt;&lt;a class="close"&gt;x&lt;/a&gt;&lt;/div&gt;
        &lt;div class="clearer"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="popupcontent"&gt;
     &lt;!-- auto append content here --&gt; 
     &lt;/div&gt;
     &lt;div class="buttonbar"&gt;
        &lt;a class="close"&gt;Close&lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using JQuery, here's the current code I have:</p>
  
  <pre><code>var popup = $("#popup");
  var popupcontent = popup.children(".popupcontent");
  var image = $(".image");
  $(document).ready(function(){
      $("#viewpopup").click(function(){
          // Fudged indent on the top left corner
          var top = 20;
          var left = 20;
  
          // Dynamically set the contents
          // popupcontent.empty();
          // popupcontent.append();
          $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left   } });
  
      });
  
      $(".close").live("click",function(){
          $.unblockUI();
      });
  });
  </code></pre>
  
  <p>I've also got to figure out how to set the popupcontent height to auto fill the currently
  available space (I'm using ems in my css) but I'm unsure if that's a separate question :).</p>
  
  <p>Thanks :)</p>