Trying to get the value of attribute in Shopify theme's modal code returns null

Store Design
1

I’m trying to reuse this code from the theme to create a popup, it uses this custom element. When I try to console log the value of the attribute it returns null but if I console log the value of “this”, it returns the custom element. Any ideas why? Appreciate if someone can help.
Below is the code:
HTML:

<modal-opener data-modal="#PopupModal-custom" class="product-popup-modal__opener no-js-hidden 
   quick-add-hidden ">
    <button id="ProductPopup-custom" class="product-popup-modal__button link" 
       type="button" aria-haspopup="dialog">Popup!!</button>
 </modal-opener>

JS:

class ModalOpener extends HTMLElement {
  constructor() {
  super();

  const button = this.querySelector('button');

  if (!button) return;
    button.addEventListener('click', () => {
      const modal = document.querySelector(this.getAttribute('data-modal'));
      // Below returns null but if I print value of this, it returns the modal-opener tag
      console.log(modal);
      if (modal) modal.show(button);
    });
  }
}
1 Like
2

I got my answer why it was returning null. Found this modal code that has a dynamic id. My code will never find that id because I hard coded the value for data-modal, so it never finds it. Now I just need to figure out how make this work with that dynamic id.

{% assign popups = section.blocks | where: "type", "popup" %}
{%- for block in popups -%}

{%- endfor -%}