Jquery將DIV鏈接到鏈接

我試圖展示一個隱藏的DIV，但我希望它顯示在調用它的鏈接旁邊，而不是在頁面的下面。Jquery將DIV鏈接到鏈接

頁面上可能有幾個超鏈接或圖像鏈接，我想調整'popup'div以顯示在已被點擊的鏈接或圖像旁邊。

我該怎麼做。？

這是我使用jQuery：

function deselect(e) { 
    $('.pop').slideFadeToggle(function() { 
    e.removeClass('selected'); 
    });  
} 

$(function() { 
     $("[id$='contact']").click(function(){ 

    if($(this).hasClass('selected')) { 
     deselect($(this));    
    } else { 
     $(this).addClass('selected'); 
     $("#messagepop").css({position:"absolute", top:event.pageY, left: event.pageX}); 
     $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#contact')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
};

我創建了一個FIDDLE顯示我有什麼至今。

感謝

來源

2014-12-02 Rocket

你有正確的代碼，但您使用了錯誤的選擇。當你需要'.messagepop'時，你使用了'＃messagepop'。 http://jsfiddle.net/j08691/bm0sascz/3/ – j08691 2014-12-02 16:22:41

主要的是你被ID（#messagepop）不是類（.messagepop）指messagepop。

其次，你可以把它旁邊顯示的鏈接，通過使用offset()獲得鏈接的位置：

$(".messagepop").css({position:"absolute", 
         top:$(this).offset().top, 
         left: $(this).offset().left});

Updated Fiddle

來源

2014-12-02 16:21:53 Rhumborl

謝謝你的工作很好..無論如何添加一個關閉圖標到右上角？ – Rocket 2014-12-02 16:27:46

是的，你可以'位置：絕對'在右上角的鏈接。只要記住將它連接到相同的'$（'。close'）。click'處理程序 - http://jsfiddle.net/bm0sascz/5/ – Rhumborl 2014-12-02 16:33:56

- 謝謝最後一個問題。無論如何，如果再次單擊相同的鏈接，停止彈出關閉？或者如果新的鏈接被點擊？所以你必須先關閉當前的那個？ – Rocket 2014-12-02 18:38:46

Jquery將DIV鏈接到鏈接

回答

相關問題