如何让 AMP Cookie 同意模式对话框背景正常工作？

Question

我想在我的静态 AMP 网站上实施 cookie 同意。 amp-story-consent 到目前为止似乎不适合（cookie 同意书没有页面或书挡，如果您知道的解决方案，请补充）。我正在尝试按照示例实现我自己的模式对话框。

<amp-consent layout="nodisplay" id="cookie-consent-element">
  <script type="application/json">
  {
    "consents": {
      "my-consent": {
        "checkConsentHref": "https://amp.dev/documentation/examples/api/get-consent",
        "promptUI": "cookie-consent-ui"
      }
    }
  }
  </script>
  <div id="cookie-consent-ui" class="card col-lg-6 col-md-8 col-sm-10 col-xs-12" aria-labelledby="cookie-consent-title" role="dialog">
    <h2 id="cookie-consent-title">Cookie Consent</h2>
    <p>
      Lorem ipsum dolor sit amet, list of cookies
    </p>
    <ul>
      <li>
         ...
      </li>
    </ul>
    <button type="button" on="tap:cookie-consent-element.accept" class="btn--primary" role="button">Accept</button>
    <button type="button" on="tap:cookie-consent-element.reject" class="btn--secondary" role="button">Reject</button>
  </div>
  <div id="modal-overlay" tabindex="-1">
  </div>
</amp-consent>

相关款式：

#modal-overlay {
    width: 100%;
    height: 100%;
    z-index: 1002; /* places the modal overlay between the main page and the modal dialog*/
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

#cookie-consent-ui {
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003; /* places the modal dialog on top of everything else */
    position: fixed;
}
#cookie-consent-ui h2 {
    text-align: center;
}

我正处于显示对话框的阶段。我遇到的问题： 1. modal-overlay 有一个 hidden 属性（我猜是从某些 AMP 逻辑中得出的），因此它不会将模态对话框的周围环境作为背景覆盖。 2. 如果我手动显示它（在调试器中删除 hidden），我仍然可以将对话框的焦点移到背景元素上。 tabindex=-1 应该可以防止这种情况发生，但不起作用。

那么我怎样才能用对话框显示背景呢？否则，一旦用户接受或拒绝同意，这似乎就起作用了：我将 data-block-on-consent 添加到相关的 amp 元素，并且对话框不再显示。我是否应该尝试组合 amp-user-notification 和 amp-consent？

Answer 1

我最终使用 amp-lightbox 为模态对话框投射背景。我希望在某些示例中会立即提到这一点。我以这种方式将模态对话框和背景标签嵌入到 amp-lightbox 中：

<amp-consent layout="nodisplay" id="cookie-consent-element">
  <script type="application/json">
  {
    "consentInstanceId": "cookie-consent",
    "consentRequired": true,
    "promptUI": "cookie-consent-ui-lightbox"
  }
  </script>
  <amp-lightbox id="cookie-consent-ui-lightbox" layout="nodisplay" tabindex="-1">
   <div id="cookie-consent-ui" class="card col-lg-6 col-md-8 col-sm-10 col-11" aria-labelledby="cookie-consent-title" role="dialog">
    <h2 id="cookie-consent-title">Cookie Consent</h2>
    <p>
      Lorem ipsum dolor sit amet, list of cookies
    </p>
    <ul>
      <li>
         ...
      </li>
    </ul>
    <button type="button" on="tap:cookie-consent-element.accept" class="btn--primary" role="button">Accept</button>
    <button type="button" on="tap:cookie-consent-element.reject" class="btn--secondary" role="button">Reject</button>
   </div>
   <div id="cookie-consent-backdrop" tabindex="-1">
   </div>
  </amp-lightbox>
</amp-consent>

当我将对话框和背景嵌入灯箱时，背景没有被隐藏，tabindex="-1" 似乎也能正常工作。与问题相比，一个改进是我不使用任何虚拟 REST 端点 "checkConsentHref": "https://amp.dev/documentation/examples/api/get-consent"，而只是简单地使用 "consentRequired": true。不幸的是包括灯箱

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

意味着需要额外下载 7.3 KB (amp-lightbox-0.1.js) + 2.7 KB (amp-auto-lightbox-0.1.js) = 10 KB JavaScript，但这仍然比 amp-story-consent 路由 amp-story-0.1.js 为 81.4 KB，甚至超过 AMP 的母亲 v0.js 71.7 KB。

我也在AMP项目上开了一个issue，求一个官方的例子： https://github.com/ampproject/amp.dev/issues/3988

这里是我自己的网站供参考：https://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/blob/master/_layouts/default.html#L56

如何让 AMP Cookie 同意模式对话框背景正常工作？

How to get AMP Cookie consent modal dialog backdrop working?

amp-html

cookieconsent

ccpa

gdprconsentform