Sam Skirrow Sam Skirrow - 2 months ago 10
HTML Question

jQuery show unique popup for each link clicked

I have a series of links on my page, each link has a unique id:

library_vid_link-UNIQUE_ID
. When clicked, I want to show a popup which shows information unique to that link.

For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id:
less_preview_popup-UNIQUE_ID
(the unique id for the link and popup both match).

Here is a sample of my html code:

<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>

<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>


Here is the jquery i'm currently using:

jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});


The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?

Answer

Use the data-attribute:

<a data-popup="lesson_preview_popup_801" ....

And

$("#"+$(this).data("popup")).show().css('top', '25%');

Using $(this).next() instead, assumes that the div to show is the next sibling of the link