示例：用户同意模态框 UI - amp.dev

用户同意模态框 UI
- 简介设置定义同意流程同意对话框 Iframe

网站

简介

有时，发布商希望在初始同意提示 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 准备就绪时，它可以向 amp-consent 组件发送带有样式信息的 postMessage。

window.parent.postMessage({
  type: 'consent-ui',
  action: 'ready',
  initialHeight: '80vh',
  enableBorder: true
}, '*');

这里，initialHeight 是一个字符串，表示 iframe 应占用的视口高度。介于 30 和 60（包括 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 上编辑示例

由 @micajuineho 撰写

用户同意模态框 UI

简介

设置

定义同意流程

同意对话框 Iframe