1

我在设置 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;
}

提前致谢

4

1 回答 1

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/。

于 2012-11-04T19:29:39.537 回答