Question

I’m currently using the Block UI modal plugin (http://www.malsup.com/jquery/block/) on my web application.

Generating the modals requires a bit of jQuery to be typed out. I was just wondering if I was doing this the quickest way. Can anyone suggest a faster method of typing out the code below because I sense I am being a bit repetitive?

 $(document).ready(function () {

/*=======================================
MODAL WINDOW
=======================================*/

    // register window

    $('#register').click(function () {
        $.blockUI({
            message: $('#register_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#register_close').click(function () {
        $.unblockUI();
        return false;
    });

    // about window

    $('#about').click(function () {
        $.blockUI({
            message: $('#about_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#about_close').click(function () {
        $.unblockUI();
        return false;
    });

    // privacy window

    $('#privacy').click(function () {
        $.blockUI({
            message: $('#privacy_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#privacy_close').click(function () {
        $.unblockUI();
        return false;
    });

    // terms window

    $('#terms').click(function () {
        $.blockUI({
            message: $('#terms_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#terms_close').click(function () {
        $.unblockUI();
        return false;
    });

    // language window

    $('#language').click(function () {
        $.blockUI({
            message: $('#language_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#language_close').click(function () {
        $.unblockUI();
        return false;
    });

    // forgot password window

    $('#forgotpwd').click(function () {
        $.blockUI({
            message: $('#forgotpwd_win'),
            css: {
                width: '500px'
            }
        });
    });

    $('#forgotpwd_close').click(function () {
        $.unblockUI();
        return false;
    });

});

Answer 1

add a class to each window –

Well I don’ know what you’re using to trigger the opening of the windows ie links..buttons..divs. So in my fiddle I just used buttons.

$('.windowClass').click(function(){  // <-- bind to all window elements with that class
    $.blockUI({
        message: $('#' + this.id + '_win'),
        css: {
            width: '500px'
        }
    });
});

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

anchor tags

<a id="register" class='openMod' href='#'>Register</a>
<a id="about" class='openMod' href='#'>about</a>
<a id="language" class='openMod' href='#'>language</a>
<a id="terms" class='openMod' href='#'>terms</a>
<a id="privacy" class='openMod' href='#'>privacy</a>

then

$('a.openMod').click(function(e){
    e.preventDefault(); // <-- don't forget this
    $.blockUI({
        message: $('#' + this.id + '_win'),
        css: {
            width: '500px'
        }
    });
});

updated with links using same class

http://jsfiddle.net/qt9EZ/2/