个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我为我的在线商店创建了一个 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>
这项工作但我唯一没有做的是将他的状态设置为默认打开。
我尝试更改布局，但仅支持 nodisplay。
我还检查了 AMP.printState():默认情况下为 null，当我单击按钮打开灯箱时，状态值为:
{"showLightbox": true}
所以，我最后一次尝试是设置默认状态
<amp-state id="showLightbox">
<script type="application/json">true</script>
</amp-state>
现在，当我打开页面并检查 AMP.printState() 时，我看到:
{"showLightbox": true}
但是直到我点击“打开”按钮，我的灯箱仍然没有显示。
我接受任何解决方案、其他组件或任何解决方法。
最佳答案
创建自定义灯箱
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>关于lightbox - AMP 灯箱默认打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59052103/
27
4
0
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
如何在放大的每个图像下添加自定义文本？现在它基于 alt 文本，但我想使用图像等对其进行更多自定义。 完美的解决方案是将文本显示在 div 中。 这是代码笔: // Create a lightbox
为了重新启动我的客户站点 (craft2eu.net)，我需要集成 Galleriffic用lightBox .我知道有 GallerificPlus ，但它基于旧版本的 Galleriffic，它带
设计一个网站，其中我在很多地方使用了很多背景:rgba。因此，当我尝试制作一个灯箱时，我正在使用 background: rgba(0, 0, 0 , 0.6) !important; 使屏幕的其余部
晚上好，感谢您首先尝试提供帮助。 我有一个“作品集”页面，其中包含 45 张我 build 的房屋的图片。它们被布置在一个网格中，5 宽 9 向下。简单地说，当您在浏览器中单击并展开图像时，效果很好。
我试图允许从灯箱弹出窗口填写表格。类似于“获得满意度”使用的那种(尽管我只需要能够收集信息，而不是从查询中显示信息)。您可以在 http://tweet.fabeetle.com 处查看“获得满意”示
我正在尝试使用这个灯箱， http://lokeshdhakar.com/projects/lightbox2/#getting-started in my app. 1) How can I ad
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
有谁知道一个好的 Rails 灯箱插件？我找到了 redbox，但它似乎已经过时了。 谢谢! -艾略特 最佳答案 我只使用常规的 Lightbox 2。包括所有适当的 javascript 和样式表，
我正在使用 bootstrap-lightbox以便在页面中显示某些图像。 × 我只需要显示被点击的缩略图的完整版本。 是
我目前正在使用 prettyPhoto在我正在开发的网站上，但在移动设备上遇到了一个小问题。 该插件具有选项“allow_resize: false”，它不允许调整大于视口(viewport)的照片大
我正在使用jquery lightbox ，有没有办法显示文本字段而不是图像或两者都显示？ 或者也许是另一种在灯箱弹出窗口中显示文本的方式？ 最佳答案 这是灯箱的最佳示例视频 https://www.
我对 Jquery 很陌生，我发现了几个使用 cookie 和 onload 功能打开灯箱的示例。我正在使用与 fancybox 一起使用的 cookie 示例，但我一直在我的所有网站上使用 Pret
我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激，因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像，这样当我单击每个图像时，此灯箱效果将适用
首先，我将从以下内容开始:我绝不是一名开发人员、编码员等。我只是一名平面设计师，正在帮助 friend 设计她的网站。 截至目前，我在将缩略图链接到我的灯箱标注上的完整图像时遇到问题 - 您可以在 w
我肯定遇到了一个简单的问题，但就是无法解决。我想按照描述使用 jquery 触发灯箱 here但这是行不通的。.lightBox() 方法找不到，我只是不明白为什么。 代码是 $(f
我在 Lightbox iframe 中有一个按钮。如何通过单击该按钮关闭该 iframe？ 我的代码是这样的: 最佳答案 通过this answer至 Close a ligh
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在使用 angular 来显示我的 Student Object 的详细信息 一切正常 但还需要作业文本上的超链接，这样当有人点击它时，会打开一个灯箱，其中包含所有作业对象的详细信息。 现在我的老
我是一名优秀的程序员,十分优秀！