Can fancybox open multiple instances of a form class

 <a href=".login_form" class="the_form">click to Contact</a>


$(".the_form").fancybox({
        'scrolling'     : 'no',
        'overlayOpacity': 0.1,
        'showCloseButton'   : false,
        'onClosed'      : function() {
            $("#login_error").hide();
        }
    });






$(".login_form").bind("submit", function() {

    if ($(this).find(".name").val().length < 1 || $(this).find(".email").val().length < 1 开发者_如何学JAVA|| $(this).find(".msg").val().length < 1)  {
        $(this).find(".login_error").show();
        $.fancybox.resize();
        return false;
    }
});

I have a form that loops and creates many instances of it. What I want to do is on that link click open that specific instance of the form. I know i can achieve this by creating unique ids for each form, however Im wondering if there is an easier way. This code looks great in theory, but fancybox won't work with ".login_form" only "#login_form" which is a specific instance.

If you show some additional markup I might be able to help.

However, maybe you could iterate over each item and bind the fancy box to it that way? That way each iteration you could reference the form direction in your fancy box declaration?

$(".the_form").each(function(){

    $(this).fancybox({
        'content': $(this).find("someChildOfTheForm"),
        'scrolling'     : 'no',
        'overlayOpacity': 0.1,
        'showCloseButton'   : false,
        'onClosed'      : function() {
            $(this).find(".login_error").hide();
        }
    });

});

Example on jsfiddle to describe what I am talking about...

Also if I got you correctly, you can use multiple selectors like this

$('#id1, #id2, #id3').fancybox({
    'scrolling'     : 'no',
    'overlayOpacity': 0.1,
    'showCloseButton'   : false,
    'onClosed'      : function() {
        $(this).find(".login_error").hide();
    }
});