簡體   English   中英

setTimeout 后如何在 AMP 頁面上顯示彈出窗口

[英]How to show popup on AMP page after setTimeout

我試圖讓彈出窗口在經過一定時間后出現在 AMP 頁面上,但在控制台中收到錯誤 - [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. [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. . 但是我需要在用戶頁面上沒有任何操作的情況下顯示彈出窗口。 關於如何做到這一點的任何想法?

  <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>

我在這里使用 amp-script,但這可能不是最佳方式。

我找到了解決這個問題的解決方案 - 沙盒

該解決方案正在使用amp-user-notification

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM