Optimize functions in jQueryUI

Question

I want to optimized some codes (I use jQuery UI):

$(function() {
    $('.click-login-modal').click(function() {
        $('.login-modal').dialog('open');
        return false;
    })

    $('.login-modal').dialog({
        autoOpen: false,
        width: 500,
        height:300,
        modal: true,
        resizable: false,
    })
    $('.click-register-modal').click(function() {
        $('.register-modal').dialog('open');
        return false;
    })

    $('.register-modal').dialog({
        autoOpen: false,
        width: 500,
        height:300,
        modal: true,
        resizable: false,
    })
})

It's possible? I have two deferential modals. (Dialog Popup)

Answer 1

var options = {
        autoOpen: false,
        width: 500,
        height:300,
        modal: true,
        resizable: false
    };

$(".register-modal").dialog(options);
$(".login-modal").dialog(options);

$('.click-register-modal, .click-login-modal').click(function() {
    $(this).dialog('open');
    return false;
});

Answer 2

I would use the tabs approach, where the href would point to the element ID, so you can change your modal classes to IDs and then use:

var options = {
        autoOpen: false,
        width: 500,
        height:300,
        modal: true,
        resizable: false
    };

$(".register-modal").dialog(options);
$(".login-modal").dialog(options);

$('.click-register-modal, .click-login-modal').click(function() {
    $($(this).attr('href')).dialog('open');
    return false;
});

Or if you need to use classes then replace the hash # with a dot . also if you are not using LINKS you may use the rel attribute to point to your dialogs or even jquery data.