making a pop up box on a calendar

making a pop up box on a calendar

Hi,

This my first post on here so hope I'm giving you guys enough information.

I am trying to build a calendar that has clickable dates that reveal a pop up box with the event of the day when you click on them.

I have got some basic functionality at the moment with the pop up working on one date, but need some help making it work on multiple dates.

at the moment I have the pop up box positioned relative and and am using the toggle function to switch the display form none to block.

I need to work out how to position the pop up box no matter which date you click on?

here is the mark up for part of the table:

                                 <tr>
                                    <td>21</td>
                                    <td>22</td>
                                    <td>23</td>
                                    <td>24</td>
                                    <td class="active"><a class="pop" href="#">25</a></td>
                                    <td>26</td>
                                    <td>27</td>
                                </tr>

and for the pop-up box:

                                <div class="calendar-pop-up">
                                      <div class="calendar">
                                          <p class="title-event">Bedford Fun Run</p>
                                          <p><em>25th Februaury 2010</em></p>
                                          <p><strong>Bedford General Hospital</strong></p>
                                          <a class="calendar-details" href="#">View full Details</a>
                                      </div>
                                      <div class="bottom-arrow">
                                      </div>
                                </div>

here is the css for the pop up box:

                              .calendar-pop-up {

                                        background: #fff url(../images/pop-up-strip.gif) repeat-x bottom right;
                                        border: 1px solid #ccc;
                                        position: relative;
                                        bottom: 168px;
                                        left: 80px;
                                        -moz-box-shadow: 0px 0px 4px #1c1c1c;
                                        display: none;
                                    }

and the basic jquery:

                            $('.pop').toggle(function(){
                                        $('.calendar-pop-up').css({display: 'block'});
                              }, function () {
                                        $('.calendar-pop-up').css({display: 'none'});
                              });