Getting modal to dynamically resize when window is resized

Question

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: http://jsfiddle.net/2dpc7/. If you try dragging the Results panes then you can see that the modal doesn't really dynamically adjust to fit. Why is this?

HTML

<div style="float: left;">
        <a id="about" class="windowClass" href="#">About</a>&nbsp;&middot;
        <a id="terms" class="windowClass" href="#">Terms</a>&nbsp;&middot;
        <a id="privacy" class="windowClass" href="#">Privacy</a>&nbsp;&middot;
        <a id="language" class="windowClass" href="#">Language: English</a>
</div>
<div id="register_win" class="modal">
    <span class="modal_header">Register</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="register_close">
    </div>
</div>
<div id="about_win" class="modal">
    <span class="modal_header">About</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="about_close">
    </div>
</div>
<div id="terms_win" class="modal">
    <span class="modal_header">Terms</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="terms_close">
    </div>
</div>
<div id="privacy_win" class="modal">
    <span class="modal_header">Privacy</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="privacy_close">
    </div>
</div>
<div id="forgotpwd_win" class="modal">
    <span class="modal_header">Forgotten your password?</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="forgotpwd_close">
    </div>
</div>
<div id="language_win" class="modal">
    <span class="modal_header">Language</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="language_close">
    </div>
</div>

CSS​

.modal {
    display: none;
    padding: 10px;
    cursor: default;
}
.modal_header {
    font-family: Verdana, Geneva, sans-serif;
    float: left;
}
.modal_close {
    cursor: pointer;
    float: right;
}​

JS

$(document).ready(function () {

    $('.windowClass').click(function () { // <-- 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 () { //<-- gets all elements with id's that end with close
        $.unblockUI();
        return false;
    });

});​

Answer 1

Use a listener to handle the resize and then resize your modal window. Alternatively you can use percentages in your CSS to handle the modal window.

$(window).bind("resize", function() {
   var newWindowHeight = $(window).height(),
       newWindowWidth = $(window).width();

   //Do Resizing Here
});