示例：灯箱广告 - amp.dev

灯箱广告
- 摘要样式横幅标记卡片灯箱

实验性

此示例使用以下实验性功能：amp-lightbox-a4a-proto。通过下面的按钮启用实验。某些组件还需要启用 AMP Beta 通道。了解有关实验性功能的更多信息。

启用实验
AMP 版本
PROD BETA

查看演示在 Playground 中打开

摘要

使用amp-lightbox的示例 AMPHTML 广告。

样式

这是一个高级示例，需要一些样式才能使其正常显示和运行。此处设计的样式具有响应性，可用于各种广告尺寸。

<style amp-custom>
  /* Main element that contains the creative. */
  .root-container {
    background: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    overflow: hidden;
    width: 340px;
    height: 240px;
    position: relative;
    margin: 0 auto;
    display: block;
  }
  .logo-img {
    display: block;
  }
  .stretch {
    flex: 1;
  }
  .button {
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
    display: inline-block;
    background-color: #2979ff;
    text-decoration: none;
  }
  .button:active {
    background-color: #92bbff;
  }
  /* Basic cards styling */
  .cards-container {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
  }
  .card {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  /* Position expand button absolutely on top of the card */
  .expand-button {
    padding: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    z-index: 1;
    left: 40%;
    top: 40%;
    font-size: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  }
  /* Change position of the expand button for the middle card */
  .card-gauges .expand-button {
    left: 90px;
    top: 50px;
  }
  /* Lightbox styling */
  amp-lightbox {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.8);
  }
  .lightbox {
    height: 100%;
    margin: 0 auto 0;
    max-width: 600px;
    background: #fff;
    color: #888;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  }
  .lightbox-main {
    flex: 1;
    display: flex;
    max-width: 340px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    line-height: 20px;
    align-self: center;
  }
  .lightbox-main p {
    margin: 5px 0;
  }
  .lightbox-main h3 {
    text-transform: uppercase;
    margin: 10px auto 0;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 14px;
    color: #000;
    align-self: center;
    max-width: 320px;
  }
  /* Creates decorative underline for h3 headers */
  .lightbox-main h3:after {
    display: block;
    content: " ";
    background-color: #2979ff;
    width: 20px;
    height: 3px;
    margin: 12px auto 10px;
  }
  .lightbox-close-container {
    text-align: center;
    border-top: 1px solid #eee;
    padding: 18px 0;
  }
  .lightbox-header {
    background: #000;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox-header h1  {
    display: inline;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 14px;
    border-left: 1px solid #fff;
    margin: 0 0 0 12px;
    padding-left: 12px;
  }
  .lightbox-hero {
    position: relative;
    overflow: hidden;
  }
  .learn-more a {
    padding: 8px;
    text-transform: uppercase;
    display: inline-block;
    color: #2979ff;
    text-decoration: none;
    font-weight: bold;
  }
  .learn-more a:active {
    background-color: #f0f0f0;
  }
  /* Responsive styles so that the lightbox does not over-stretch */
  @media (max-height: 500px) {
    .lightbox {
      max-width: 400px;
    }
    .lightbox-hero {
      max-height: 160px;
    }
    .lightbox-hero-img {
      margin-top: -30px;
    }
  }
  @media (max-height: 360px) {
    .lightbox-hero-img {
      display: none;
    }
    .lightbox-header {
      position: static;
    }
  }
</style>

amp-ad-banner是一个虚拟 AMP 元素，由 AMP 运行时使用，以确定打开灯箱时广告的位置。

请注意，amp-ad-banner仍处于实验阶段，将来可能会发生更改。请参阅此 GitHub 问题进行跟踪。

<amp-ad-banner class="root-container" layout="container">

卡片

AMP 有一个用于事件和操作的系统。它使用特定领域的语言来描述如何触发操作。在此示例中，我们设置了 on 属性，以便在点击卡片按钮时激活灯箱。

每个按钮都会打开与触发它的卡片相关的灯箱。

<div class="cards-container" id="cardsContainer">
  <div class="card card-seats">
    <div class="button expand-button"
        role="button"
        on="tap:lightbox-seats.activate">+</div>
    <amp-img src="/static/samples/img/car-seats.jpg"
        width="340"
        height="240"
        layout="responsive"
        alt="Ergonomic Leather Seats"></amp-img>
  </div>
</div>

灯箱

amp-lightbox 组件定义了将在全视口叠加层中显示的子元素。我们为每个灯箱设置了不同的 ID，以便可以通过其他元素上的操作打开和关闭它们。其内容是普通的 AMP HTML。

<amp-lightbox id="lightbox-seats" layout="nodisplay">
  <div class="lightbox">
    <div class="lightbox-hero">
      <amp-img src="/static/samples/img/car-seats.jpg"
          width="608"
          height="342"
          layout="responsive"
          alt="Ergonomic Leather Seats"
          class="lightbox-hero-img"></amp-img>
      <div class="lightbox-header">
        <amp-img src="/static/samples/img/car-logo.png"
            width="72"
            height="32"
            layout="fixed"
            alt="Howdy"
            class="logo-img"></amp-img>
        <h1>The all-new WX-S R5</h1>
      </div>
    </div>
    <div class="lightbox-main">
      <h3>Ergonomic Leather Seats</h3>
      <p>
        Available in Comfort Suede and leather. High-contrast stitching colors available.
      </p>
      <p class="learn-more">
        <a href="https://amp.org.cn/documentation/examples/" target="_blank">Learn more</a>
      </p>
    </div>
    <div class="lightbox-close-container">
      <div class="button lightbox-close-button" role="button"
          on="tap:lightbox-seats.close">
        Close
      </div>
    </div>
  </div>
</amp-lightbox>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @sebastianbenz 撰写

灯箱广告

实验性

摘要

样式

横幅标记

卡片

灯箱