title: Getting modal to dynamically resize when window is resized
body: <p>I've managed to get my Block UI modal dead centre but now the problem is that when the window
  is resized (made smaller or bigger), the modal (and the surrounding overlay) does not dynamically resize. Is there a way I can achieve this using jQuery? Here is what I've done so far: <a href="http://jsfiddle.net/2dpc7/" rel="nofollow">http://jsfiddle.net/2dpc7/</a>. If you try dragging the Results panes then you can see that the modal doesn't really dynamically adjust to fit. Why is this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="float: left;"&gt;
          &lt;a id="about" class="windowClass" href="#"&gt;About&lt;/a&gt;&amp;nbsp;&amp;middot;
          &lt;a id="terms" class="windowClass" href="#"&gt;Terms&lt;/a&gt;&amp;nbsp;&amp;middot;
          &lt;a id="privacy" class="windowClass" href="#"&gt;Privacy&lt;/a&gt;&amp;nbsp;&amp;middot;
          &lt;a id="language" class="windowClass" href="#"&gt;Language: English&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="register_win" class="modal"&gt;
      &lt;span class="modal_header"&gt;Register&lt;/span&gt;
      &lt;div class="modal_close"&gt;
          &lt;img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="register_close"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="about_win" class="modal"&gt;
      &lt;span class="modal_header"&gt;About&lt;/span&gt;
      &lt;div class="modal_close"&gt;
          &lt;img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="about_close"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="terms_win" class="modal"&gt;
      &lt;span class="modal_header"&gt;Terms&lt;/span&gt;
      &lt;div class="modal_close"&gt;
          &lt;img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="terms_close"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="privacy_win" class="modal"&gt;
      &lt;span class="modal_header"&gt;Privacy&lt;/span&gt;
      &lt;div class="modal_close"&gt;
          &lt;img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="privacy_close"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="forgotpwd_win" class="modal"&gt;
      &lt;span class="modal_header"&gt;Forgotten your password?&lt;/span&gt;
      &lt;div class="modal_close"&gt;
          &lt;img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="forgotpwd_close"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="language_win" class="modal"&gt;
      &lt;span class="modal_header"&gt;Language&lt;/span&gt;
      &lt;div class="modal_close"&gt;
          &lt;img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="language_close"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>​</p>
  
  <pre><code>.modal {
      display: none;
      padding: 10px;
      cursor: default;
  }
  .modal_header {
      font-family: Verdana, Geneva, sans-serif;
      float: left;
  }
  .modal_close {
      cursor: pointer;
      float: right;
  }​
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function () {
  
      $('.windowClass').click(function () { // &lt;-- bind to all window elements with that class
          $.blockUI({
              message: $('#' + this.id + '_win'),
              css: {
                  top:  ($(window).height() - 200) /2 + 'px', 
                  left: ($(window).width() - 200) /2 + 'px', 
                  width: '200px'
              }
          });
      });
  
      $('[id$=_close]').click(function () { //&lt;-- gets all elements with id's that end with close
          $.unblockUI();
          return false;
      });
  
  });​
  </code></pre>