Generating an iterated list of titles from context received by the template in Django is simple:
{% for instance in object_list %}
<li>{{instance.international_title}} </li>
{% endfor %}
CSS makes it easy to create a popup overlay as well:
#overlay
{
height:300px;
width:300px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
border:5px solid #cccccc;
border-radius:10px;
}
<div align="center">
<a href="#overlay"> Click Title for Detail</a>
</div>
<div id="overlay">
<p> Here is the text giving more detail<p>
</div>
The challenge arises when attempting to associate unique text with each unique title
{{instance.international_short_description}}#overlay1, #overlay2 and customize href for each one? Alternatively, can a single class be used where a variable is passed to select the correct text? Unfortunately, examples demonstrating this are difficult to find.