[英]How to show popup on AMP page after setTimeout
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.
我试图让弹出窗口在经过一定时间后出现在 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.
. . 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.我在这里使用 amp-script,但这可能不是最佳方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.