Menu
I created an AMP theme for my online shop. What I need now is a popup/modal for newsletter subscription that will be automatically opened when a user access to the home-page.
I found the amp-lightbox component that seems ok for my purpose.
I used this example:
<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>
This work but the only thing I failed to do is set his state opened by default.
I tried changing the layout but nodisplay only is supported.
I also inspected the AMP.printState(): by default is null, when I click on the button to open the lightbox the state value is:
{"showLightbox": true}
So, last try I did is to set the default state
<amp-state id="showLightbox">
<script type="application/json">true</script>
</amp-state>
Now when I open the page and inspect AMP.printState() I see:
{"showLightbox": true}
But my lightbox still not showing until I click on the Open button.
I accept any solutions, other components or any workaround.
762
Create custom light-box
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
