Description Displays elements in a full-viewport “lightbox” modal.
Required Script <script async custom-element="amp-lightbox" src=""></script>
Supported Layouts nodisplay
Examples See AMP By Example's amp-lightbox sample.


The amp-lightbox component defines child elements that display in a full-viewport overlay/modal. When the user taps or clicks an element (e.g., a button), the amp-lightbox ID referenced in the clicked element's on attribute triggers the lightbox to take up the full viewport and displays the child elements of the amp-lightbox.

Pressing the escape key on the keyboard closes the lightbox. Alternatively, setting the on attribute on one or more elements within the lightbox and setting its method to close closes the lightbox when the element is tapped or clicked.

<button on="tap:quote-lb">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
    <blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
    <button on="tap:quote-lb.close">Nice!</button>


id (required)

A unique identifer for the lightbox.

layout (required)

Must be set to nodisplay.

scrollable (optional)

When the scrollable attribute is present, the content of the lightbox can scroll when overflowing the height of the lightbox.

animate-in (optional)

Defines the style of animation for opening the lightbox. By default, this will be set to fade-in. Valid values are fade-in, fly-in-bottom and fly-in-top.

⚠️ Note that the fly-in-* presets will modify the transform property of the amp-lightbox element. Do not rely on transforming the amp-lightbox element directly. If you need to apply a transform, set it on a nested element instead.


You can style the amp-lightbox with standard CSS.


The amp-lightbox exposes the following actions you can use AMP on-syntax to trigger:

Action Description
open (default) Opens the lightbox.
close Closes the lightbox.


See amp-lightbox rules in the AMP validator specification.