amp-lightbox

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

전체 표시 영역 '라이트박스' 모달에 요소를 표시합니다.

Required Scripts

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

Supported Layouts

nodisplay

예제

Product Browse Page Product Page amp-date-picker amp-lightbox

설명	전체 표시 영역 '라이트박스' 모달에 요소를 표시합니다.
필수 스크립트	`<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>`
지원되는 레이아웃	nodisplay
예	AMP By Example의 amp-lightbox 샘플을 참조하세요.

동작

amp-lightbox 구성요소는 전체 표시 영역 오버레이/모달에 표시되는 하위 요소를 정의합니다. 사용자가 요소(예: 버튼)를 탭하거나 클릭하면 클릭한 요소의 on 속성에서 참조하는 amp-lightbox ID가 전체 표시 영역을 사용하도록 라이트박스를 트리거하고 amp-lightbox의 하위 요소를 표시합니다.

키보드에서 Esc 키를 누르면 라이트박스가 닫힙니다. 또는 라이트박스에 있는 하나 이상의 요소에서 on 속성을 설정하고 해당 메소드를 close로 설정하면 요소를 탭하거나 클릭할 때 라이트박스가 닫힙니다.

<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>
</amp-lightbox>

라이트박스에 이미지를 표시하는 데 <amp-image-lightbox> 구성요소도 사용할 수 있습니다.

속성

animate-in(선택사항)	라이트박스를 여는 데 사용할 애니메이션 스타일을 정의합니다. 기본적으로 이 값은 `fade-in`으로 설정됩니다. 유효한 값은 `fade-in`, `fly-in-bottom` 및 `fly-in-top`입니다. 메모: `fly-in-*` 애니메이션 사전 설정에서 `amp-lightbox` 요소의 `transform` 속성을 수정합니다. `amp-lightbox` 요소를 직접 변환하지 마세요. 변환을 적용하려면 중첩된 요소에 대신 설정합니다.
close-button(AMPHTML 광고에 필수)	라이트박스 상단에 있는 닫기 버튼 헤더를 렌더링합니다. 이 속성은 AMPHTML 광고와 함께 사용할 때만 필요하고 유효합니다.
id(필수)	라이트박스의 고유한 식별자입니다.
layout(필수)	`nodisplay`로 설정해야 합니다.
scrollable(선택사항)	`scrollable` 속성이 있는 경우 라이트박스의 높이를 넘어가면 라이트박스의 콘텐츠를 스크롤할 수 있습니다. 참고: `scrollable` 속성은 AMPHTML 광고에서 `<amp-lightbox>` 사용 시 허용되지 않습니다. 세부정보는 AMPHTML 광고에서 amp-lightbox 사용 섹션을 읽어보세요.
scrollable(선택사항)

스타일 지정

표준 CSS로 amp-lightbox의 스타일을 지정할 수 있습니다.

작업

amp-lightbox에서는 AMP on-syntax를 사용하여 트리거할 수 있는 다음 작업을 공개합니다.

작업	설명
`open`(기본값)	라이트박스를 엽니다.
`close`	라이트박스를 닫습니다.

AMPHTML 광고에서 `amp-lightbox` 사용

AMPHTML 광고에서 사용할 amp-lightbox 구성요소는 실험적이며 현재 개발 중입니다. AMPHTML 광고에서 amp-lightbox를 사용하려면 amp-lightbox-a4a-proto 실험을 사용 설정하세요.

일반 AMP 문서에서 amp-lightbox 사용과 AMPHTML로 작성된 광고를 사용하는 데는 몇 가지 차이점이 있습니다.

close-button 필요

AMPHTML 광고의 경우 close-button 속성이 필요합니다. 이 속성을 사용하면 라이트박스 상단의 헤더가 렌더링됩니다. 헤더에는 닫기 버튼과 '광고'라는 레이블이 포함되어 있습니다. 이 헤더의 요구사항은 다음과 같습니다.

AMPHTML 광고의 일관되고 예측 가능한 사용자 환경을 설정합니다.
라이트박스의 이탈 지점이 항상 존재하는지 확인하세요. 그러지 않으면 광고 소재에서 라이트박스를 통해 호스트 문서 콘텐츠를 쉽게 도용할 수 있습니다.

close-button 속성은 필수이며 AMPHTML 광고에서만 허용됩니다. 일반 AMP 문서에서 <amp-lightbox> 콘텐츠의 일부로 필요할 때마다 닫기 버튼을 렌더링할 수 있습니다.

스크롤 가능한 라이트박스는 허용되지 않음

AMPHTML 광고의 경우 스크롤이 가능한 라이트박스는 허용되지 않습니다.

투명 배경

AMPHTML 광고에서 <amp-lightbox>를 사용하면 라이트박스가 확장되기 전에 AMP 런타임에서 광고 소재 콘텐츠의 크기를 조정하고 재정렬하기 때문에 <body> 요소의 배경이 투명하게 됩니다. 이 작업은 라이트박스가 열린 상태에서 광고 소재의 시각적 '점프'를 방지하기 위해 시행됩니다. 광고 소재에 배경이 필요하면 <body>가 아닌 중간 컨테이너(예: 전체 크기 <div>)에서 설정하세요.

AMPHTML 광고가 제3자 환경에서 실행 중인 경우(예: 비AMP 문서) 광고 소재는 표시 영역에서 상대적으로 중앙에 배치된 다음 확장됩니다. 제3자 iframe에서는 비동기적인 프레임 크기 조정과 같은 기능을 사용 설정하는 데 postMessage API를 사용해야 하므로, 광고 소재를 먼저 중앙에 두면 시각적 점프 없이 원활하게 전환할 수 있습니다.

라이트박스에서 AMPHTML 광고 전환 예

아래 예는 전환을 통해 호환 iframe에서 AMPHTML 광고의 라이트박스 요소에 animate-in="fly-in-bottom" 속성이 설정된 AMPHTML 광고와 제3자 iframe의 AMPHTML 광고를 찾는 방법을 설명합니다.

호환 iframe(예: AMP 캐시에서 가져옴)

제3자 iframe(예: AMP 캐시 외부에서 가져옴)

유효성 검사

AMP 유효성 검사기 사양에서 amp-lightbox 규칙을 참조하세요.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동

버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기

amp-lightbox 1.0 0.1