POWR Popup - Trigger Different Popup From Single Webpage

For users who wish to trigger more than one POWR Popups from a single page.

by POWrRangerAlex

HTML

<script src="https://www.powr.io/powr.js?platform=html"></script>


<img style="height: 100px; width: 100px;" class="trigger-popup" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_large.png?v=1480481056" data-app-id="88b5cd7f_1704933631" alt="" />

   <br>
   <br>

   <a class="trigger-popup" data-app-id="d7764e59_1704933712">
     I am the <a> that trigger-popup d7764e59_1704933712 click me
   </a>

   <br>
   <br>

   <button class="trigger-popup" data-app-id="2eb052e2_1704933794">
     I am the button element that trigger-popup 2eb052e2_1704933794 click me
   </button>

   <div class="powr-popup" id="88b5cd7f_1704933631"></div>

   <div class="powr-popup" id="d7764e59_1704933712"></div>

   <div class="powr-popup" id="2eb052e2_1704933794"></div>

   <script>
     const popupsElements = document.getElementsByClassName("trigger-popup");
     const makeArray = (elements) => {
       return Array.from(elements);
     }
     const popupArray = makeArray(popupsElements);

     function setStyle(element, value) {

       elementId = element.dataset.appId;

       const popup = document.getElementById(elementId);
       popup.style.display = value
     };

     const hideAllPopups = () => {
       for (const popupElement of popupArray) {

         setStyle(popupElement, "none");
       }
     };

     document.addEventListener("DOMContentLoaded", () => {

       popupArray.forEach(e => e.addEventListener("click", function() {

         hideAllPopups();

         setStyle(this, "block");

       }));

     });

   </script>