всплывающее окно не закрывается при повторном нажатии

Question

Мне нужно использовать всплывающий скрипт, в котором всплывающее окно было переключено с использованием значения true или false переменной. например:

var iconvideoneww = true; 

$('.icontrigger').click(function(){ 
if(iconvideoneww){ 
$('.iconvideopop').fadeIn(80); 
} 
    else{ 
$('.iconvideopop').fadeOut(80);  
    } 
    iconvideoneww =!iconvideoneww; 
}); 

И работает отлично. Проблема в том, что мне также нужен скрипт, в котором щелчок в любом месте за его пределами скрывает всплывающее окно. Теперь я добавляю такой скрипт, что происходит, так как всплывающее окно все еще находится в шаге «if» вышеприведенного кода, и щелчок в любом месте за его пределами скрывает его, теперь, если я снова нажимаю кнопку запуска, чтобы открыть всплывающее окно , код начинает идти на «else», тогда как я хочу, чтобы он перешел к «if». код для скрытия всплывающего окна при щелчке в любом месте снаружи:

$(document).mouseup(function (event) { 
    var container1 = $(".tagevent-content"); 
    if (container1.has(event.target).length === 0) { 
     container1.hide(); 
     toggleEventState = false; 
    } 
}); 

скрипку: https://jsfiddle.net/p969ohh7/ Любая помощь будет оценена. Благодаря

Answer 1

Вот что вы делаете:

Регистрация нажмите на картинку для отображения всплывающего окна. Зарегистрируйте еще один клик по документу, чтобы скрыть его , но предотвратить появление событий щелчка с всплывающего окна с помощью .stopPropagation().

https://jsfiddle.net/p969ohh7/5/

$(".icontrigger").click(function (e) { 
    var $popup = $(".iconvideopop"); 
    if (!$popup.is(":visible")) { 
     $popup.fadeIn(80); 
    } else { 
     $popup.fadeOut(80); 
    } 
    e.stopPropagation(); 
}); 

$(document).click(function() { 
    var $popup = $(".iconvideopop"); 
    if ($popup.is(":visible")) { 
     $popup.fadeOut(80); 
    } 
}); 

$(".iconvideopop").click(function (e) { 
    e.stopPropagation(); 
}); 

Answer 2

Если бы я тебя, я хотел бы оставить переменную всплывающее окно статуса самостоятельно и действовать по статусу фактического элемента:

$('.icontrigger').click(function(){ 
    var $popup = $('.iconvideopop'); 
    if (!$popup.is(':visible')) { 
     $popup.fadeIn(80); 
    } else { 
     $popup.fadeOut(80);  
    } 
}); 

Я использую $ всплывающего окна, чтобы сохранить элемент JQuery, просто не задавать для него 3 раза с помощью селектора ... Использование is (': visible') будет более точным, так как оно напрямую проверяет статус элемента и определяет действие, которое должно быть выполнено соответствующим образом.

Вы также можете использовать объект для выполнения работы или изменить событие onmouseup при отображении всплывающего окна. Извлекая его, когда всплывающее окно не отображается, это будет оптимальный шаг, но для всего одного события на самом деле не требуется ИМО.

EDIT: Вот объект, который я имел в виду ...

var toggleable = function(selector){ 
    return { 
     $element:$(selector), 
     toggle:function(){ //Decides to display or hide the element. 
      if (!this.$element.is(':visible')) { 
       this.show(); 
      } else { 
       this.hide();  
      } 
     }, 
     show:function(){ //Displays the element 
      this.$element.fadeIn(80); 
     }, 
     hide:function(){ //Hides the element 
      this.$element.fadeOut(80); 
     } 
    }; 
} 

var iconvideopop = toggleable('.iconvideopop'); 
$('.icontrigger').click(function(){iconvideopop.toggle();}); 
$(document).mouseup(function(){iconvideopop.hide();}); 

EDIT2: Чтобы предотвратить всплывающее окно, чтобы закрыть при щелчке (как мы слушаем на документе за клик), его рекомендуется сделать следующее:

function myEventHandler(event){ 
    if (!$(event.target).closest('.iconvideopop').length) { 
     //We clicked anywhere on the document BUT on .iconvideopop or its children. We can therefor close the pop-up. 
    } 
}