Question

I have a div with a link and on click should open a jQuery dialog above/within the div itself with fadein and out.

I’ve tried to examplify it with this image: http://img593.imageshack.us/img593/9852/exampled.jpg

HTML

<div id="dialog" title="Basic dialog" style="display: none">Add to cart</div>

jQuery

$('.div').click(function(){
   $('#dialog').fadeToggle();
});

CSS

.div{
    background-color: #fff;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
    position:relative;
}

#dialog {
    display:block;
    position:absolute;
    display:none;
    left:0; top:0;
    width:100%; height:100%;
    background-color: #FFFEDF;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
}​

I have put together a fiddle of what I have so far: http://jsfiddle.net/725Me/

Now, the problem is: if i have a lot of div elements, do I have to define

<div id="dialog"> Add to cart </div> for each div? Would it be possible to define it only once?

Answer 1

UPDATED ANSWER:

If you don’t want to define the <div class="dialog">Add to cart</div> markup for every div, you can use jQuery to apply it the first time each div is clicked. (Notice that I changed the ID dialog to a class dialog instead. An ID have to be unique for each element, which is not going to work if we are going to reuse this code for each div).

When a div is clicked, we check if the dialog class has been added already, otherwise we append it. Then we fadeToggle() as usual.

Something like this:

$('.div').click(function() {
    if ($(".dialog", this).length === 0) {
        $("<div class=\"dialog\">Add to cart</div>").appendTo(this);
    }
    $(".dialog", this).fadeToggle();
})​;

Your markup would then be a bit simpler:

<div class="div">
    lorem ipsum dolor sit amete
</div>
<div class="div">
    lorem ipsum dolor sit amete
</div>
<div class="div">
    lorem ipsum dolor sit amete
</div>​

A working example: http://jsfiddle.net/725Me/4/