我为我的网上商店创建了AMP主题。 我现在需要的是用于通讯订阅的弹出窗口/模式,当用户访问首页时,该弹出窗口/模式将自动打开。
我发现适合我的目的的amp-lightbox组件。
我使用了以下示例:
<amp-lightbox id="my-bindable-lightbox" data-amp-bind-open="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
<div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">Open</button>
这项工作,但我唯一无法做的就是将他的状态默认设置为打开。
我尝试更改布局,但仅支持不显示。
我还检查了AMP.printState(): 默认情况下为null,当我单击按钮以打开灯箱时,状态值为:
{"showLightbox": true}
所以,我最后一次尝试的是设置默认状态
<amp-state id="showLightbox">
<script type="application/json">true</script>
</amp-state>
现在,当我打开页面并检查AMP.printState()时,我看到:
{"showLightbox": true}
但是,直到我单击“打开”按钮,我的灯箱仍然不显示。
我接受任何解决方案,其他组件或任何解决方法。