Question

我为我的网上商店创建了AMP主题。我现在需要的是用于通讯订阅的弹出窗口/模式，当用户访问首页时，该弹出窗口/模式将自动打开。

我发现适合我的目的的amp-lightbox组件。

我使用了以下示例：

<amp-lightbox id="my-bindable-lightbox" data-amp-bind-open="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
    <div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
        <h1>Hello World!</h1>
    </div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">Open</button>

这项工作，但我唯一无法做的就是将他的状态默认设置为打开。

我尝试更改布局，但仅支持不显示。

我还检查了AMP.printState（）：默认情况下为null，当我单击按钮以打开灯箱时，状态值为：

{"showLightbox": true}

所以，我最后一次尝试的是设置默认状态

<amp-state id="showLightbox">
    <script type="application/json">true</script>
</amp-state>

现在，当我打开页面并检查AMP.printState（）时，我看到：

{"showLightbox": true}

但是，直到我单击“打开”按钮，我的灯箱仍然不显示。

我接受任何解决方案，其他组件或任何解决方法。

Answer 1

创建自定义灯箱

CSS

.custom-lightbox {
      background: rgba(0,0,0,0.8);
      width: 100%;
      height: 100vh;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .custom-lightbox h1 {
      color: white;
    }

HTML

 <div class="custom-lightbox" tabindex="0" role="button"  id="customLightbox" on="tap:customLightbox.hide">
    <h1>Hello World!</h1>     
  </div>
  <button on="tap:customLightbox.show">
    Open Custom Lightbox
  </button>

<!--
  ## Introduction

  The [`amp-lightbox`](/content/amp-dev/documentation/components/reference/amp-lightbox-v0.1.md) component allows for a “lightbox” or similar experience - where upon user interaction a component expands to fill the viewport, until it is closed again by the user.
--><!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
  <title>amp-lightbox</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-lightbox/index.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
     .custom-lightbox {
      background: rgba(0,0,0,0.8);
      width: 100%;
      height: 100vh;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .custom-lightbox h1 {
      color: white;
    }
  </style>
</head>
<body>
  <!-- ## Basic usage -->
  <!--
    The `amp-lightbox` component defines the child elements that will be displayed in a full-viewport overlay.
    To close the lightbox via click or tap use the `on` attribute on one or more elements inside the lightbox. In this example the user can click anywhere in the lightbox to close it.

    The lighbox is shown when the user taps or clicks on an element with `on` attribute that targets the id of an `amp-lightbox` element.
  -->
  
  <div class="custom-lightbox" tabindex="0" role="button"  id="customLightbox" on="tap:customLightbox.hide">
    <h1>Hello World!</h1>     
  </div> 
  <button on="tap:customLightbox.show">
    Open Custom Lightbox
  </button>
</body>
</html>

AMP灯箱默认打开

1 个答案: