Скрыть div, когда пользователь нажимает снаружи, если не закрывать лайтбокс

0

В настоящее время я использую следующий код, позволяющий пользователю показывать/скрывать div на клике. При нажатии в любом месте за пределами div он закрывает div.

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

$(document).ready(function(){

$("a.dropdown-link").click(function(evt) {
  evt.preventDefault();
  var $div = $(this).next('.info-container');
  $(".info-container").not($div).slideUp();
    if ($div.is(":visible")) {
        $div.slideUp()
    }  else {
       $div.slideDown();
    }
});

$(document).click(function(e){
    var p = $(e.target).closest('.dropdown').length
    if (!p) {
          $(".info-container").slideUp();
    }
});
     $('.movie-link').magnificPopup({type:'iframe'});
});

<a class="dropdown-link" href="#"><div class="dropdown dropdown-processed">More info</div></a>
<div class="info-container" style="display: none;">Video preview: <a class="movie-link" href="videourl"></a></div>

Я использую Magnific Popup для лайтбокса: http://dimsemenov.com/plugins/magnific-popup/

Мои знания JavaScript довольно простые, поэтому любая помощь приветствуется.

Теги:

3 ответа

0
Лучший ответ

В "нажмите, чтобы закрыть функцию div, вы можете проверить, включен ли лайтбокс или нет. Простой if ($("#lightbox").css("display") == "none") должен иметь возможность делать трюк

EDIT: поместите эту строку после строки $(document).ready

var state = 0; // default state
$('.movie-link').click(function() { state = 1; }); // state = 1, lightbox on

в исходном коде, в строке 384, вставьте этот код

state = 2; //state = 2, lightbox close button clicked

идея не запускает функцию "закрыть div", когда состояние равно 1 (загорается лайтбокс и щелкает случайные предметы внутри или за пределами лайтбокса) или 2 (нажата кнопка закрытия лайтбокса), а состояние возврата - 0, когда это было 2

поэтому вместо того, if я предоставил комментарий, используйте это

if (state == 2) {
    state = 0;
} else if (state == 0) {
    //rest of the code
}

это просто что-то, что я собрал и еще не проверил, поэтому я действительно не знаю, работает ли оно или нет, поэтому просто резервное копирование файлов js на всякий случай.

EDIT 2:

удалите все изменения в edit 1 и используйте это вместо if (state == 2) {

if (e.target != $('.mfp-bg')[0] and e.target != $('.mfp-wrap')[0]) {

ИЗМЕНИТЬ 3

var e_class = $(e.target).attr('class');
if (e_class != 'mfp-close' && e_class != 'mfp-container') {

рабочий пример: http://imgcrash.comeze.com/test.html

Поделиться
  • 0
    Спасибо за код, извините, я не совсем уверен, где это должно идти. Мне просто нужно поместить это перед длиной var p = $(e.target).closest('.dropdown').length ?
  • 0
    @jacobgibbs да, вам нужно будет покрыть весь код {}, но я думаю, что вы уже это знаете.
Показать ещё 18 комментариев
0

Попробуй это:

$("a.dropdown-link").click(function(evt) {
  evt.preventDefault();
  evt.stopPropagation(); //We stop the propagation of the event

  //Changed it to slideToggle and added stop to prevent weird animation
    //on multiple clicks
  $(this).next('.info-container').stop().slideToggle()
});

$(document).click(function(e){
    //Check if it has the class info-container
    if (!$(e.target).hasClass("info-container")) {
          $(".info-container").slideUp();
    }
});
     $('.movie-link').magnificPopup({type:'iframe'});

скрипка

Поделиться
  • 0
    Хм, я вижу то же самое поведение в jsfiddle с evt.stopPropagation или без evt.stopPropagation , я что-то упустил?
  • 0
    Спасибо за код. Похоже, что это заставляет div скользить вверх при открытии лайтбокса, несмотря на то, что ссылка лайтбокса находится внутри информационного контейнера.
Показать ещё 4 комментария
0

Я не 100%, не тестируя это, но вы можете столкнуться с проблемами с $(document).click(...); поскольку щелчок в любом месте document вызовет это событие.

Когда вы закрываете всплывающее окно, вы, вероятно, запускаете это событие и раздвигаете div info-container.

Кажется, что вы ищете клики на .dropdown с классом .dropdown. Почему бы не использовать что-то вроде:

$('.dropdown').click(function(e) {... });

Поделиться
  • 0
    Я изменил обе ссылки на $(document) на $('.dropdown') и теперь он позволяет закрывать лайтбокс без закрытия div информационного контейнера, однако div не закрывается, когда пользователь щелкает где-то за его пределами. ,

Ещё вопросы

Сообщество Overcoder
Наверх
Меню