Открыть и закрыть лайтбокс - PullRequest
Новая
       16

Открыть и закрыть лайтбокс

0 голосов
/ 18 сентября 2018

Я делаю лайтбокс, но у меня есть небольшая проблема.Я могу закрыть лайтбокс, когда нажимаю на кнопку X, но я хочу закрыть лайтбокс, когда я щелкаю и за пределами окна.

И второй вопрос, это когда я открываю лайтбокс и нажимаю надругой.Первый не закрывается, а затем у меня открыты два лайтбокса.

Есть идеи, ребята?Спасибо за все:)

1 Ответ

0 голосов
/ 19 сентября 2018 

$(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, но я хочу закрыть лайтбокс, когда щелкаю и за пределами окна.

Я бы попытался получить светло-серый, прозрачныйзадний план также распространяется на весь экран, и по щелчку он может закрыть лайтбокс

И второй вопрос - это когда у меня открыт лайтбокс и я нажимаю на другой.Первый не закрывается, а затем у меня открыты два лайтбокса.

У меня была бы некоторая переменная на более высоком уровне в качестве своего рода контроля для лайтбокса.Если вы видите, что это правда, вы можете либо запретить открытие второго лайтбокса, либо закрыть первый и открыть второй.

...