Как заставить работать модальный фон диалога согласия AMP Cookie?

Question

Я хочу реализовать согласие на использование файлов cookie на моем статическом веб-сайте AMP. Вamp-story-consentпока что, похоже, это не подходит (у согласия на использование файлов cookie нет страниц или подставки для книг, пожалуйста, внесите вклад, если вы знаете решение, как создать согласие на использование файлов cookie AMP с помощью amp-story-agreement?). Я пытаюсь реализовать собственный модальный диалог, следуя примерам.

<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 КБ (amp-lightbox-0.1.js) + 2,7 КБ (amp-auto-lightbox-0.1.js) = Необходимо загрузить 10 КБ JavaScript, но это все равно намного лучше, чем amp-story-consent маршрут где amp-story-0.1.js будет 81,4 КБ, что даже больше, чем у матери AMP v0.js 71,7 КБ.