1

我想在我的静态 AMP 网站上实施 cookie 同意。amp-story-consent到目前为止似乎不适合（cookie 同意没有页面或书挡，如果您知道如何在 amp-story-consent 的帮助下构建 AMP 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？

4

1 回答 1

0

我最终使用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 ( ) = 10 KB 的 JavaScript，但这仍然比 81.4 KB 的路径amp-auto-lightbox-0.1.js要好得多，甚至超过 AMP 的母亲71.7 KB。amp-story-consentamp-story-0.1.jsv0.js

我还在 AMP 项目中打开了一个关于此问题的问题，要求提供官方示例： https ://github.com/ampproject/amp.dev/issues/3988

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

于 2020-05-22T23:52:23.157 回答