Question

我一直在设置jQuery块UI时遇到困难。它似乎没有工作（即模态开放_我似乎无法确定我犯了错误。这是我到目前为止所做的：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函数中更改了一些代码，close链接有一个不是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/。

jQuery块UI无法正常工作

1 个答案: