Only one custom module triggers pop up modal content

[ahemilee]

I am working on a Pricing page with custom pricing modules that gives you the option to include a pop up box where you can insert an image or a table. Each module should allow for different modal content. The problem is only one module seems to be triggering the pop up box when clicked on and that modal content overrides all of the other modules. 

https://www.antennahouse.com/testingmodals?hs_preview=WFtzvCpQ-33535024768

Example: The first pricing module under "Sample Product" has an image inserted that is a horizontal green table for the modal content, but if you click on "View Add-ons", a different image displays. The purple table image you see is inserted in a different module (last module at the bottom of the page under section "AHRTS"). If you can click on the buttons labeled "View Add-ons" or "Compare Versions" in any of the modules, you'll see the same purple table which is not what we want.

Is there any way to allow for different images to be inserted as the modal content for the other modules on the page?

[sharonlicari]

Hey @ahemilee 

Thank you for sharing this information, I'll tag a few experts could share their knowledge with you.

Hey @Jsum @FabianRichter @Kevin-C any advice you can give to @ahemilee?

Thank you 
Sharon

[Kevin-C]

Thanks @sharonlicari 

Hey @ahemilee 

In the inspector type "btn", and see what you get:

You've got a scope issue. The "btn" variable is being overwritten with each module until the last one because it is global, which is why we see it contents. To fix this you create a closure with an IIFE. Just wrap you module js in a document ready function:

   $("document").ready(function() {
      // Module JS here
  });

[ahemilee]

Thank you Kevin, the global module is the main issue. I tried your solution, but it prevented the pop up from opening when clicked on.

I'm not familiar with javascript, so I'm resorting to creating new modules in order to insert different images for each pop up. 

[Jsum · Accepted solution]

@ahemilee ,

Ideally you would want a custom module with a repeater group, and the repeated set fields that would be button and modal content/settings. 

You could also use the same module multiple times if you have a static module with only one set of fields. 

Either way, the issue with repeating javascript actions is scoping. Like if you have multiple sliders on a page and each has prev/next button. If you don't scope correctly then the javascript function that slides the slider on prev/next button click, per slider, would slide all of the sliders.

something like this:

<div class="scope-wrapper">
    <div class="slider"></div>
    <button></button>
</div>

var button = $("button");

button.on('click touch', function() {
    var par = $(this).parent(".scope-wrapper"),
        sli = par.find(".slider");
    
    run_function(sli);
});

The button that is clicked you go up the dom tree to find a parent with a class ".scope-wrapper", then go back down to find a child with the class ".slider". Multiple instances of this code will work independently because it's based on the parent of the button clicked.

[ahemilee]

@Jsum Thank you!