1

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: http://jsfiddle.net/4vJLN/.

My code is as follows:

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

Thanks in advance

1 Answer 1

1

I change a bit your code in the document.ready function, the close link has a class not 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;
    });
    });

And in the html, I set correctly the ID of the modal window:

<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>​

Here is a working fiddle http://jsfiddle.net/4vJLN/4/.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.