jquery - Javascript to show hidden div overlay with close button on clicks

Question

I am after a little help - I'm not a great programmer, and can usually find the answers to my questions with googling, but not this time!

I am trying to produce a specific effect on a webpage, and am struggling to find some basic JS I can modify/tweak to do what I need.

I am going to put a panel of 10 images, in two rows of five, across a webpage. Each image will have a 'Name' above it, and a 'Job Title' below it. When the image is clicked on, I'd like the (relevant) hidden div to display, over the top of all the images - i.e. with the top left corner matching the top left corner of the first image. The div will be a pre-set width.

In the top corner of each div I want a simple close button.

So, what I am trying to produce is code that's scalable - i.e. in theory it shouldn't matter how many images there are as long as I get the structure right, when you click on the image, it 'shows' the correct hidden div.

We already load jQuery on to the webpage, so using that would be no problem.

Any advice/links to snippets/pointers would be appreciated!

Answer 1

This is quite simply achieved with jQuery and jQueryUI.

For brevity I have only included 5 images here http://jsfiddle.net/8kefF/2/

HTML:

<div>
    <div class="clickThisPicture" data-content-id="1">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="2">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="3">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="4">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="5">
        <img src="http://placehold.it/350x150" />
    </div>
</div>
<div class="hiddenContent" data-content-id="1">Hidden content 1</div>
<div class="hiddenContent" data-content-id="2">Hidden content 2</div>
<div class="hiddenContent" data-content-id="3">Hidden content 3</div>
<div class="hiddenContent" data-content-id="4">Hidden content 4</div>
<div class="hiddenContent" data-content-id="5">Hidden content 5</div>

CSS:

.hiddenContent {
    display:none;
}
.clickThisPicture {
    float:left;
    border:1px solid #000;
}

Javascript:

$(document).ready(function () {
    $('.clickThisPicture').on('click', function (event) {
        var contentId = $(this).data('content-id');
        $(".hiddenContent[data-content-id='" + contentId + "']").dialog({
            modal: true,
            resizable: false,
            draggable: false,
            closeOnEscape: false,
            dialogClass: "no-close",
            buttons: {
                "Close": function () {
                    $(this).dialog("destroy");
                }
            }
        });
    });
});

EDIT: I updated the code to hide the default close button so as to destroy the element each time as the OP asked for scalability so having potentially 100's/1000's of extra elements in the DOM would lead to memory issues. eventually.