jQuery塊UI不工作

Question

我一直在設置jQuery塊UI的困難。它似乎沒有工作（即模式開放up_，我似乎無法指出我犯了什麼錯誤。這是我迄今爲止所做的：http://jsfiddle.net/4vJLN/。

我的代碼是如下：

JS

$(document).ready(function() { 

    $('.windowClass').click(function() { // <-- 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() { //<-- 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' 
    }); 
});​ 

HTML

<div id="forgotpass_link" class="modal"> 
    <div class="modal_headerwrapper"> 
    <div class="modal_header">Get started with a free account</div> 
    <div class="modal_close">Close</div> 
    </div> 
    <div class="modal_bodywrapper"> 
    <div class="modal_body">ddd</div> 
    </div> 
</div> 

<a class="windowClass" id="forgotpass_link">Forgot your password?</a>​ 

CSS

#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; 
} 

在此先感謝

Answer 1

我改了一下中的document.ready功能代碼，有着密切的聯繫有一個類不能ID：

$(document).ready(function() { 
    $('.windowClass').click(function() { // <-- 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' 
      } 
     }); 
    }); 

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

而在HTML，我設置正確ID模式窗口：

<div id="forgotpass_win" class="modal"> 
    <div class="modal_headerwrapper"> 
    <div class="modal_header">Get started with a free account</div> 
    <div class="modal_close">Close</div> 
    </div> 
    <div class="modal_bodywrapper"> 
    <div class="modal_body">ddd</div> 
    </div> 
</div> 
<a class="windowClass" id="forgotpass_link">Forgot your password?</a>​ 

這裏是一個工作小提琴http://jsfiddle.net/4vJLN/4/。