CODEWITHSUNDEEP
jquery
methuselah
methuselah

Reputation: 13206

jQuery block UI not working

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

Upvotes: 1

Views: 1138

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

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

Upvotes: 1

Related Questions