I currently have a section dedicated to showcasing various projects. Each project is represented by an image, and upon clicking on it, a popup box will appear with more detailed information about that specific project.
Issue at Hand
The challenge I am facing is how to utilize a single popup box for an indefinite number of projects. Essentially, I want the same popup box, styled with CSS, to display information corresponding to whichever project is clicked.
For instance:
When a user clicks on any project
As illustrated above, the popup box contains identical information regardless of the project being clicked on.
Here's a snippet of the HTML code used to display the images:
<!-- ========= li ========= -->
<li>
<div class="item-img">
<img alt="Ink Transition Effect" src="img/HQCLogo.svg">
</div>
<div class="item-info light-bg" style="background-color: rgb(241, 241, 241)">
<a href="http://www.hqcglobal.com"><em>HQCGlobal</em></a> <i class="date">March 12, 2015</i>
</div>
<div class="feed" id="feed1">
<div class="heart" id="like1" rel="like"></div>
<div class="likeCount" id="LikeCount1"></div>
</div>
</li>
<!-- ========= li ========= -->Furthermore, here is the code for the reusable popup box:
<div class="java-popup" role="alert">
<div class="java-popup-container">
<a href="#0" class="java-popup-close img-replace">Close</a>
<div class="left-box">
<img src="img/HQCLogo.svg" width="750px" />
</div>
<div class="right-description-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi...
(Text shortened for brevity)
</p>
</div>
</div>
<!-- cd-popup-container -->
</div>
<!-- cd-popup -->To trigger the opening of the popup box upon clicking on a project, JavaScript has been utilized:
// Open popup box
$('.item-img').on('click', function(event) {
event.preventDefault();
$('.java-popup').addClass('is-visible');
});
//close popup
$('.java-popup').on('click', function(event) {
if ($(event.target).is('.java-popup-close') || $(event.target).is(
'.java-popup')) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});My main query revolves around how I can dynamically populate the popup box with unique information based on the project clicked.
Regards, Naseeb