<p>This is just a JavaScript problem. You have to add an event listener to the marker which opens the corresponding popup.</p>

<p>I put together a little example on JSBin here: <a href="https://jsbin.com/tigefikalu/edit?html,js,console,output" rel="nofollow noreferrer">https://jsbin.com/tigefikalu/edit?html,js,console,output</a></p>

<p>Hope that helps with the logic.</p>

CC BY-SA 3.0
2017-01-19T18:04:36.370Z
Thankyou it's almost there. As it's selecting the different popups correctly. However, when I click to activate it, it scrolls me back to the top of the page. Which I'm assuming is something to do with the #?
mention79
CC BY-SA 3.0
2017-01-19T18:22:09.340Z
I've got it to stop jumping back to the top by adding `return false;` at the end of the script. Thanks for your help.
mention79
CC BY-SA 3.0
2017-01-19T15:19:52.573Z
2017-01-19T15:19:52.573Z
Andreas
<p>Popup Closed Screenshot
<a href="https://i.sstatic.net/Wqch8.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Wqch8.jpg" alt="enter image description here"></a></p>

<hr>

<p>Popup Open Screenshot
<a href="https://i.sstatic.net/yAOjJ.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/yAOjJ.jpg" alt="enter image description here"></a></p>

<p>I have image that has multiple markers on it that can be clicked to bring up different popups. However, I need to some help refining the code to work properly and to link to the correct id tag. </p>

<p>My template code:</p>

<pre><code>{% set var = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in var %}
&lt;!-- Popup Modal --&gt;
{% set plotPopup = 'plotPopup' ~ entry.title|camel %}
&lt;div class="property popup" id="{{ plotPopup }}"&gt;
....markup.......
&lt;/div&gt;
{% endfor %}
</code></pre>

<p>Which outputs</p>

<pre><code>&lt;div class="property popup" id="plotPopupplot1"&gt;...&lt;/div&gt;
&lt;div class="property popup" id="plotPopupplot2"&gt;...&lt;/div&gt;
&lt;div class="property popup" id="plotPopupplot3"&gt;...&lt;/div&gt;
&lt;div class="property popup" id="plotPopupplot4"&gt;...&lt;/div&gt;
</code></pre>

<p>And below is the current script text:</p>

<pre><code>&lt;script&gt;
// When the user clicks on plot number, open the popup
function openPopup() {
{% set plottitle = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in plottitle %}
    var popup = document.getElementById('plotPopup{{ entry.title|json_encode()|camel }}');
{% endfor %}
    popup.classList.toggle('show');
}
&lt;/script&gt;
</code></pre>

<p>Which is printing out as:</p>

<pre><code>&lt;script&gt;
// When the user clicks on &lt;div&gt;, open the popup
function openPopup() {
    var popup = document.getElementById('plotPopupplot1');
    var popup = document.getElementById('plotPopupplot2');
    var popup = document.getElementById('plotPopupplot3');
    var popup = document.getElementById('plotPopupplot4');
    popup.classList.toggle('show');
}
&lt;/script&gt;
</code></pre>

<templating><javascript>
Link Popup Modal to correct script in loop
# Link Popup Modal to correct script in loop

(Asked by: username_0 on 2017-01-19)

Popup Closed Screenshot


Popup Open Screenshot

I have image that has multiple markers on it that can be clicked to bring up different popups. However, I need to some help refining the code to work properly and to link to the correct id tag. 
My template code:
{% set var = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in var %}

{% set plotPopup = 'plotPopup' ~ entry.title|camel %}

....markup.......

{% endfor %}

Which outputs
...
...
...
...

And below is the current script text:


Which is printing out as:

**Tags:** templating, javascript

---

## 1 answers

### Answer by username_1 on 2017-01-19. Score: 2 | Accepted answer

This is just a JavaScript problem. You have to add an event listener to the marker which opens the corresponding popup.

I put together a little example on JSBin here: <https://jsbin.com/tigefikalu/edit?html,js,console,output>

Hope that helps with the logic.

> **Comments:**
> **username_0**: Thankyou it's almost there. As it's selecting the different popups correctly. However, when I click to activate it, it scrolls me back to the top of the page. Which I'm assuming is something to do with the #?  
> **username_0**: I've got it to stop jumping back to the top by adding `return false;` at the end of the script. Thanks for your help.  

---

