Question

I am working with the colorbox plugin to create modal windows for my web app. I am having a little trouble opening a <div> that is related to <a>.

Ideal behavior

Clicking on:
<a rel="id_123"></a>

should open up a form with the contents in:
div rel="id_123"></div>

Check out my code here for clarification: http://jsfiddle.net/Q4GGS/6/

Thanks!

EDIT: This is what I have tried so far. When a link is clicked, the click event will create a modal with ALL of the listings instead of the related ones.
http://jsfiddle.net/Q4GGS/7/

Answer 1

DIV’s don’t have rel attributes. You need to replace those with something else (such as a class or an ID). Example JS:

$('.dialog_link').click(function(e) {
    e.preventDefault();

    $.colorbox ({
        href: "#" + this.rel,
        width: '50%',
        inline: true
    });
});

Example HTML:

    <div class="ticket_details" id="id_123">
        text
    </div>
    <div class="ticket_details" id="id_124">
        text
    </div>