彈出不再關閉再次點擊

Question

我必須使用一個彈出式腳本，其中彈出被切換使用true或false的變量值。像這樣：

var iconvideoneww = true; 

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

切換工作正常。問題是，我還需要一個腳本，在其外面的任何地方點擊隱藏彈出窗口。現在我添加了這樣一個腳本，會發生的是，彈出窗口仍然處於上述代碼的'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事件。當不顯示彈出窗口時將其刪除，這將是最佳步驟，但對於僅一個事件，它不是真正需要的IMO。

編輯：這是我腦子裏想的對象...

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. 
    } 
}