Question

The problem is: 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 created this:

 $(function() {
      $( ".div" ).click(function() {
          $("#dialog").fadeIn(1000).delay(400).fadeOut(1000)
      });
 });

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

#dialog{
background-color: #FFFEDF;
border: 1px solid #FFECA2;
width: 123px;
text-align: center;
padding: 3px 9px;}

This is an example 🙂

http://img593.imageshack.us/img593/9852/exampled.jpg

How can i do this?

Another problem is: if i have many div, I must enter <div id="dialog"> Add to cart </ div> for each div?

Something like this?

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

Answer 1

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/NyuNa/2/

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;
}​