AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-lightbox

Описание Отображает элементы в модальном окне просмотра, занимающем всю область просмотра.
Скрипт <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 нельзя использовать с компонентом в объявлениях 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)

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

Проверка

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

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub