0

I'm trying to make the popup appear on the AMP page after a certain amount of time has elapsed, but getting the error in the console — [amp-script] Blocked 1 attempts to modify DOM element attributes or styles. For variable-sized <amp-script> containers, a user action has to happen first.. But I need to show popup without any actions on the page from user. Any Ideas of how can I do this?

  <style amp-custom>
    .ampPopup {
      display: none;
    }

    .ampPopup.open {
      display: block;
    }
  </style>
  
  <amp-script layout='container' script='time-script' className='sample'>
    <section className='ampPopup'>
      <h1>Popup</h1>
    </section>

    <p>...</p>
    <p>...</p>
    <p>...</p>
  </amp-script>

  <script id='time-script' type='text/plain' target='amp-script'>
    const el = document.querySelector('.ampPopup');
    const elClose = document.querySelector('.ampPopupClose');

    setTimeout(() => {
      el.classList.add('open');

      elClose.addEventListener('click', function() {
        el.classList.remove('open');
      });
    }, 3000);
  </script>

I am using amp-script here, but maybe it's not the optimal way.

Владислав Балабанович
  • 74
  • 5
  • 1
    You can't change the DOM if a.) the amp-script doesn't have a fixed size and b.) your DOM change doesn't follow a user interaction. See [the documentation for details](https://amp.dev/documentation/components/amp-script/#user-gestures). – Joachim Sauer Sep 15 '20 at 14:42
  • I know, and I am trying to find another way to do this. Maybe amp-animation and amp-position-observer can solve this but I can't make a work demo – Владислав Балабанович Sep 16 '20 at 09:14
  • The spec is written *specifically* to avoid changes to the visible content that aren't triggered by user interactions. I'm pretty sure what you want to do goes directly counter to what AMP tries to enforce and I'd guess that even if you find a way to do what you want, it would not be looked kindly upon by those who ask you to follow the AMP spec. – Joachim Sauer Sep 16 '20 at 09:21

1 Answers1

1

I found that solution that solve that do the trick — sandbox

That solution is using amp-user-notification

enter image description here

Владислав Балабанович
  • 74
  • 5