0

Popup Closed Screenshot enter image description here


Popup Open Screenshot enter image description here

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>

1 Answer 1

2

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.

2
  • 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
    Jan 19, 2017 at 18:04
  • 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
    Jan 19, 2017 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.