#BlackLivesMatter
AMP

Important: this documentation is not applicable to your currently selected format stories!

amp-lightbox

Description

Отображение элементов в модальном окне просмотра, занимающем всю область просмотра.

Required Scripts

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

Supported Layouts

Описание Отображает элементы в модальном окне просмотра, занимающем всю область просмотра.
Скрипт <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Поддерживаемые макеты nodisplay
Примеры Пример amp-lightbox на сайте AMP By Example.

Действия

Компонент amp-lightbox определяет дочерние элементы, которые отображаются в модальном окне, занимающем всю область просмотра. Когда пользователь нажимает на какой-либо элемент (например, на кнопку), идентификатор amp-lightbox, указанный в атрибуте on этого элемента, активирует модальное окно, занимающее всю область просмотра, и отображает дочерние элементы amp-lightbox.

Чтобы закрыть открывшееся окно, нужно нажать клавишу Esc. Также можно в один или несколько элементов модального окна добавить атрибут on и задать в нем метод close, чтобы окно закрывалось при нажатии на него.

<button on="tap:quote-lb">См. цитату</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
  <blockquote>"Все проходит – пройдет и это". Царь Соломон.</blockquote>
  <button on="tap:quote-lb.close">Отлично!</button>
</amp-lightbox>

Для показа изображений в окне просмотра используется компонент <amp-image-lightbox>.

Атрибуты

animate-in (необязательно) Определяет стиль анимации, используемой при открытии окна просмотра. Значение по умолчанию – fade-in. Допустимые значения: fade-in, fly-in-bottom, fly-in-top.

Примечание. Параметры анимации fly-in-* изменяют свойство transform элемента amp-lightbox. Не трансформируйте элемент amp-lightbox напрямую. Применяйте трансформацию ко вложенному элементу.
close-button (обязательно в объявлениях HTML с технологией AMP) Отображает кнопку "Закрыть" в верхней части окна просмотра. Этот атрибут применим и обязателен только для объявлений HTML с технологией AMP.
id (обязательно) Уникальный идентификатор окна просмотра.
layout (обязательно) Этому атрибуту следует присвоить значение nodisplay.
scrollable (необязательно) Наличие атрибута scrollable означает, что содержимое окна просмотра можно прокручивать, если оно выходит за рамки окна.

Примечание. Атрибут scrollable нельзя использовать с компонентом <amp-lightbox> в объявлениях HTML с технологией AMP. Подробную информацию можно найти в этом разделе.
scrollable (необязательно)

Стилизация

К компоненту amp-lightbox можно применять каскадные таблицы стилей.

Действия

Компонент amp-lightbox поддерживает следующие действия (подробнее…):

Действие Описание
open (по умолчанию) Открывает окно просмотра.
close Закрывает окно просмотра.

Как использовать amp-lightbox в объявлениях HTML с технологией AMP

Компонент amp-lightbox, используемый в объявлениях HTML с технологией AMP, является экспериментальным и находится в стадии активной разработки. Чтобы использовать `его в таких объявлениях, [включите экспериментamp-lightbox-a4a-proto`](http://cdn.ampproject.org/experiments.html).

Ниже описывается, чем отличается использование amp-lightbox в обычных документах AMP от использования в объявлениях, написанных для HTML с технологией AMP.

Обязательный атрибут close-button

Для объявлений HTML с технологией AMP атрибут close-button обязателен. Этот атрибут создает в верхней части окна просмотра заголовок, с кнопкой "Закрыть" и ярлык с надписью "Реклама". Этот заголовок необходим:

  • чтобы обеспечить последовательное оформление интерфейса объявлений HTML с технологией AMP;
  • чтобы обеспечить средство закрытия окон просмотра (в противном случае креатив может скомпрометировать содержание документа через окно просмотра.

Атрибут close-button используется и является обязательным только в объявлениях HTML с технологией AMP. В обычных документах AMP кнопку закрытия можно отображать в любом месте окна как часть содержимого <amp-lightbox>.

Окна просмотра с прокруткой запрещены

В объявлениях HTML с технологией AMP прокрутка в окнах просмотра не допускается.

Прозрачный фон

При использовании компонента <amp-lightbox> в объявлениях HTML с технологией AMP фон элемента <body> становится прозрачным, потому что библиотека AMP изменяет размеры и компоновку креативов перед открытием окна просмотра. Это делается для того, чтобы исключить резкое перемещение креатива при открытии окна просмотра. Если для вашего креатива нужен фон, установите его в промежуточном контейнере (например, в полноэкранном теге <div>), а не в теге <body>.

Когда объявление HTML с технологией AMP показывается в сторонней среде (например, в документе, где не используются технологии AMP), перед раскрытием креатив центрируется относительно области просмотра. Это связано с тем, что сторонние окна iframe используют postMessage API для изменения размеров фрейма, которое выполняется асинхронно. Поэтому предварительное центрирование креатива обеспечивает плавный переход без резких скачков.

Примеры переходов в окне просмотра для объявлений HTML с технологией AMP

В примерах ниже показано, как выглядит переход в объявлении HTML с технологией AMP, в котором есть атрибут animate-in="fly-in-bottom", установленный для элемента lightbox в совместимом окне iframe и в стороннем окне iframe.

Совместимые окна iframe (например, из кеша AMP)

lightbox ad in friendly iframe

Сторонние окна iframe (например, не из кеша AMP)

Проверка

См. раздел с правилами amp-lightbox в спецификации валидатора AMP.

Требуется дополнительная помощь?

Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.

Перейти на Stack Overflow
Нашли ошибку или недостающую функцию?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Перейти на GitHub