如何获得AMP Cookie同意模式对话框背景工作？

Question

我想在我的静态AMP网站上实施cookie同意。到目前为止，amp-story-consent似乎不适合（Cookie同意书中没有页面或书挡，如果您知道How to construct AMP cookie consent with the help of amp-story-consent?的解决方案，请加入）。我正在尝试根据示例实施自己的模态对话框。

<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"似乎也能正常工作。不幸的是包括灯箱

<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。