Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-19T18:04:36.370Z
Answers.Text: 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 #?
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-19T18:22:09.340Z
Answers.Text: 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.
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-19T15:19:52.573Z
Answers.LastActivityDate: 2017-01-19T15:19:52.573Z
Answers.UserDisplayName: Andreas
Body: <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>
  
Tags: <templating><javascript>
Title: Link Popup Modal to correct script in loop
ThreadText: # Link Popup Modal to correct script in loop
  
  (Asked by: username_0 on 2017-01-19)
  
  Popup Closed Screenshot
  [![enter image description here](https://i.sstatic.net/Wqch8.jpg)](https://i.sstatic.net/Wqch8.jpg)
  
  ---
  
  Popup Open Screenshot
  [![enter image description here](https://i.sstatic.net/yAOjJ.jpg)](https://i.sstatic.net/yAOjJ.jpg)
  
  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 %}
  <!-- Popup Modal -->
  {% set plotPopup = 'plotPopup' ~ entry.title|camel %}
  <div class="property popup" id="{{ plotPopup }}">
  ....markup.......
  </div>
  {% endfor %}
  
  ```
  
  Which outputs
  
  ```
  <div class="property popup" id="plotPopupplot1">...</div>
  <div class="property popup" id="plotPopupplot2">...</div>
  <div class="property popup" id="plotPopupplot3">...</div>
  <div class="property popup" id="plotPopupplot4">...</div>
  
  ```
  
  And below is the current script text:
  
  ```
  <script>
  // 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');
  }
  </script>
  
  ```
  
  Which is printing out as:
  
  ```
  <script>
  // When the user clicks on <div>, 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');
  }
  </script>
  
  ```
  
  **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.  
  
  ---
  
  