Open and close lightbox

Question

I make a lightbox, but I have a little problem. I can close the lightbox when I click on the X button, but I want to close the lightbox when I click outside the box too.

And the second isuee, is when I have on open lightbox and I click on another. The first don't close and then, I have two lightbox opened.

Any idea guys? Thanks for all :)

Please provide a code sample or JS Fiddle – jwebb Sep 18 '18 at 21:00 — jwebb, Sep 18 '18 at 21:00

score 0 · Answer 1 · edited Sep 19 '18 at 23:32

$(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>

Without code samples it might be kind of hard to answer, but in theory, you could try something like this:

I can close the lightbox when I click on the X button, but I want to close the lightbox when I click outside the box too.

I would try to have a light grey, transparent background come up as well covering the whole screen, and on click of that, it can close the lightbox

And the second isuee, is when I have on open lightbox and I click on another. The first don't close and then, I have two lightbox opened.

I would have some variable at a higher level as a sort of control for the lightbox. If you see it is true, you can either prevent the second lightbox from opening, or you can close the first one and open the second.

Your code didn't work. At least on my computer, Chrome 69 (64-bit). Please check it again. — , Sep 19 '18 at 23:49

Open and close lightbox

1 Answers1