jQuery block UI not working
<p>I've been having difficulty setting up jQuery block UI. It doesn't seem to be working (i.e. the modal opening up_ and I can't seem to pin point where I've made a mistake. Here is what I've done so far: <a href="http://jsfiddle.net/4vJLN/" rel="nofollow">http://jsfiddle.net/4vJLN/</a>.</p>

<p>My code is as follows:</p>

<p>JS</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() - 400) /2 + 'px', 
                left: ($(window).width() - 600) /2 + 'px', 
                width: '600px',
                height: '400px'
            }
        });
    });

    $('[id$=_close]').click(function () { //&lt;-- gets all elements with id's that end with close
        $.unblockUI();
        return false;
    });
});

$(window).on('resize', function () {
    $('body').children('.blockMsg').css({
        top  : ($(window).height() - 400) /2 + 'px', 
        left : ($(window).width() - 600) /2 + 'px'
    });
});​
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="forgotpass_link" class="modal"&gt;
  &lt;div class="modal_headerwrapper"&gt;
    &lt;div class="modal_header"&gt;Get started with a free account&lt;/div&gt;
    &lt;div class="modal_close"&gt;Close&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal_bodywrapper"&gt;
    &lt;div class="modal_body"&gt;ddd&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;a class="windowClass" id="forgotpass_link"&gt;Forgot your password?&lt;/a&gt;​
</code></pre>

<p>CSS</p>

<pre><code>#forgotpass_link {
    color: #306;
}
#forgotpass_link:hover {
    color: #C06;
    cursor: pointer;
}
.modal {
    display: none;
    cursor: default;
}
.modal_headerwrapper {
    width: 100%;
    background-color: #eeeeee;
    height: 45px;
}
.modal_header {
    float: left;
    font-size: 20px;
    padding: 10px;
}
.modal_bodywrapper {
    width: 100%;
}
.modal_body {
    padding: 15px;
    font-size: 12px;
    cursor: default;
    line-height: 1.5em;
    overflow: auto;
    height: 325px;
    text-align: justify;
}
.modal_close {
    cursor: pointer;
    float: right;
    padding: 10px;
}
</code></pre>

<p>Thanks in advance</p>
