Question

I’m putting together a team page and I have a div for each team member that includes a photo and some employee information. When I click on the picture I want a dialog to popup and use $this context to find the employee data in that same div. I cannot find a way to do this.

I got it working one way, but in that case the dialog box would only pop up once. The way I have it now, all boxes show up by default and once I’m done clicking the x’s I can then click on the photo and it opens them all again. I’ve also tried replacing .employee .employeeData with $(this) and had no luck.

EDIT: I figured out autoOpen: false will keep the dialog from automatically opening, but still doesn’t fix my issue.

UPDATED: http://jsfiddle.net/eTBS5/1/

var $dialog = $('.employee .employeeData').dialog({
    width: 600,    
    height: 400,
    modal: true,
    close: function() {
        $(this).dialog("close");
    }
});

$('.employee').click(function(){
    $dialog.dialog('open');
});​

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
    <div class="employeeData">
        <p>EMPLOYEE 1 - This is a paragraph about this person.</p>
    </div> 
</div>

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
    <div class="employeeData">
        <p>EMPLOYEE 2 - This is a paragraph about this person.</p>
    </div> 
</div>

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
    <div class="employeeData">
        <p>EMPLOYEE 3 - This is a paragraph about this person.</p>
    </div> 
</div>

<div class="employee">
    <img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" /> 
    <div class="employeeData">
        <p>EMPLOYEE 4 - This is a paragraph about this person.</p>
    </div> 
</div>

Answer 1

Can be done like this too:
DEMO

var $dialog = $('#dial').dialog({
              width: 600,    
              height: 400,
              modal: true,
              autoOpen: false,
              open: function() {
                $(this).html($(this).data('sender'));
              }
        });

        $('.employee').click(function(){
            $dialog.data('sender',$('.employeeData',this).html()).dialog('open');
        });​