打开和关闭灯箱
Posted
技术标签:
【中文标题】打开和关闭灯箱【英文标题】:Open and close lightbox 【发布时间】:2018-09-18 20:55:36 【问题描述】:我做了一个灯箱,但我有一个小问题。 我可以在点击 X 按钮时关闭灯箱,但我也想在点击框外时关闭灯箱。
第二个问题是当我打开灯箱并点击另一个灯箱时。第一个不关闭,然后,我打开了两个灯箱。
有什么想法吗? 谢谢大家:)
【问题讨论】:
请提供代码示例或JS Fiddle 【参考方案1】:$(document).ready(function()
$("a#show-panel").click(function()
$("#lightbox, #lightbox-panel").fadeIn(300);
);
$("a#close-panel").click(function()
$("#lightbox, #lightbox-panel").fadeOut(300);
)
);
.full_section_inner z-index: auto;
.link width: 100% height: auto; position: absolute; cursor: pointer;
.link:hover text-decoration: underline;
#link-text width: 100%; position: absolute; bottom: 0px; font-size: 20px; line-height: 22px; letter-spacing: 0px;
.status position: absolute; top: 0; left: -100vw;
.status:checked ~ .content -webkit-transform: none; transform: none;
.status:checked ~ .backdrop bottom: 0; opacity: 1; z-index: 1; transition: 0.3s opacity ease-in-out;
.lightbox position: fixed; right: 0; left: 0; height: 0; padding: 0; z-index: 100; top: 20%;
.lightbox .content display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 2; max-width: 550px; max-height: 80vh; margin: 20px auto; padding: 25px; background: #fff; -webkit-transform: translateY(-200%); transform: translateY(-200%); transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s transform ease-in-out; transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out; border: 3px solid;
.lightbox .header-lightbox display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 15px;
.lightbox .header-lightbox h2 margin: 0; font-size: 28px; line-height: 30px;
.button font-size: 30px;
.button:hover cursor: pointer;
.text-lightbox font-family: sans-serif; font-size: 16px; line-height: 20px; color: #000;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="link" for="lightbox-1">
<h2 id="link-text">Ona Bros</h2>
</label>
<aside class="lightbox">
<input type="checkbox" class="status" id="lightbox-1" />
<article class="content">
<header class="header-lightbox">
<h2>Title</h2>
<label class="button" for="lightbox-1">X</label>
</header>
<main class="text-lightbox">
<p>Lorem ipsum dolor sit amet.</p>
</main>
</article>
</aside>
如果没有代码示例,可能有点难以回答,但理论上,您可以尝试以下方法:
我可以在单击 X 按钮时关闭灯箱,但我也想在单击框外时关闭灯箱。
我会尝试让一个浅灰色的透明背景覆盖整个屏幕,点击它可以关闭灯箱
第二个问题是当我打开灯箱并点击另一个灯箱时。第一个不关闭,然后,我打开了两个灯箱。
我会在更高级别上设置一些变量作为灯箱的一种控制。如果您看到它是真的,您可以阻止第二个灯箱打开,或者您可以关闭第一个并打开第二个。
【讨论】:
您的代码无效。至少在我的电脑上,Chrome 69(64 位)。请再次检查。以上是关于打开和关闭灯箱的主要内容,如果未能解决你的问题,请参考以下文章
灯箱关闭后,羽毛灯箱中的 Youtube iframe 视频继续播放