如何获得AMP Cookie同意模式对话框背景工作? [英] How to get AMP Cookie consent modal dialog backdrop working?

问题描述

我想在我的静态AMP网站上实施Cookie同意.到目前为止，amp-story-consent似乎不适合(Cookie同意书中没有页面或书挡，如果您知道

I'd like to implement a cookie consent on my static AMP website. The amp-story-consent so far seems to not fit that (cookie consent has no pages or bookend, please chip in if you know a solution for How to construct AMP cookie consent with the help of amp-story-consent?). I'm trying to implement my own modal dialog following the examples.

<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应该阻止这种情况，但不起作用.

I'm at the phase when the dialog is shown. Problems I have: 1. The modal-overlay gets a hidden attribute (I guess from some AMP logic) so it does not cover the surroundings of the modal dialog as a backdrop. 2. If I manually show it (deleting the hidden in the debugger) I can still tab out the focus off of the dialog to the background elements. The tabindex=-1 supposed to prevent that, not working.

那么如何在对话框中显示背景呢?否则，一旦用户接受或拒绝同意，这似乎就起作用了:我在相关的amp元素中添加了data-block-on-consent，该对话框不再显示.我应该尝试使用amp-user-notification和amp-consent的组合吗?

So how can I make the backdrop show with the dialog? Otherwise this seems to work once the user accepts or rejects the consent: I added data-block-on-consent to the related amp elements, and the dialog doesn't show any more. Should I maybe experiment with the combination of amp-user-notification and amp-consent?

推荐答案

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

I ended up using amp-lightbox to cast a backdrop for the modal dialog. I wish this would have been mentioned right away in some examples. I embedded the modal dialog and the backdrop tag into an amp-lightbox this way:

<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.不幸的是包括灯箱

When I embed the dialog and the backdrop into the lightbox, the backdrop doesn't get hidden and the tabindex="-1" seems to work as well. One improvement compared to the question is that I don't use any dummy REST endpoint "checkConsentHref": "https://amp.dev/documentation/examples/api/get-consent", but I just simply use "consentRequired": true. Unfortunately including the lightbox

<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-consent路由中，amp-story-0.1.js为81.4 KB ，甚至比AMP的母亲v0.js 71.7 KB.

means an extra 7.3 KB (amp-lightbox-0.1.js) + 2.7 KB (amp-auto-lightbox-0.1.js) = 10 KB of JavaScript needs to be downloaded, but that's still much better than the amp-story-consent route where amp-story-0.1.js would be 81.4 KB, which is even more than the AMP's mother v0.js 71.7 KB.

这篇关于如何获得AMP Cookie同意模式对话框背景工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！