To com um codigo de uma agenda em jQuery.
Baixei e fiz umas modificações nos eventos para abrir/fechar "popup".
separei as funções, e acho que deixei algo errado, o evento click() para abrir funciona porem o evento para fechar não funciona.
Abaixo o codigo para analise.
$(function () { $('.date_has_event').each(function () { // options var distance = 80; var time = 250; var hideDelay = 500; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = $(this); var popup = $('.events ol', this).css('opacity', 0); // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).click(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; // reset position of popup box popup.css({ top: 100, left: 680, display: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ //bottom: (distance + 10)+'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }); $('.close').click(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: 0, opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); });
Todo popup leva um elemento <p> com a classe .close