用户同意模态 UI
简介
有时，发布商希望在初始同意提示 iframe 中显示更多披露信息。此示例演示如何使用 amp-consent 以及第三方 iframe 并对其进行样式设置，使其看起来像一个模态框。
设置
我们需要导入 amp-consent 组件。
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
定义同意流程
我们使用 promptUISrc 定义一个基本的同意流程来加载我们的自定义同意 iframe。
<amp-consent id="myUserConsent" layout="nodisplay">
<script type="application/json">{
"consentInstanceId": "myConsent",
"consentRequired": true,
"promptUISrc": "/static/samples/files/diy-consent.html",
"postPromptUI": "post-consent-ui"
}</script>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()">Update Consent</button>
</div>
</amp-consent>
同意对话 Iframe
当同意对话 iframe 准备就绪时，它可以向 amp-consent 组件发送带有样式信息的 postMessage。
window.parent.postMessage({ type: 'consent-ui', action: 'ready', initialHeight: '80vh', enableBorder: true }, '*');
这里，initialHeight 是一个字符串，表示 iframe 应采用的视口高度。介于 30 和 60 之间（含）的视口高度会告诉 amp-consent 将 iframe 设置为底部工作表样式。大于 60 且小于或等于 80 的视口高度会告诉 amp-consent 将 iframe 设置为居中模态框样式。
使用 data-block-on-consent 属性来阻止 AMP 组件，直到获得同意。各个 AMP 组件可以覆盖阻止行为并自行实现阻止逻辑。
这是一个在获得同意之前被阻止的图像
<amp-img data-block-on-consent src="/static/samples/img/landscape_lake_300x201.jpg" width="300" height="201">
</amp-img>
需要进一步解释？
如果本页上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切使用案例。
转到 Stack Overflow 未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您对您特别感兴趣的问题做出一次性贡献。
在 GitHub 上编辑示例-