Javascript hide on click off element

Question

У меня есть код, который вызывает всплывающее окно после выполнения таймера. В настоящее время код сконструирован так, что когда вы нажимаете на элемент, который он закрывает, я просто хочу изменить это, чтобы при щелчке элемента (где-либо еще на экране), который он закрывает.

Заранее благодарим за любую помощь.

<script type="text/javascript"> 
$(document).ready(function() { 
    if(localStorage.getItem('popState') != 'shown'){ 
     $("#popup").delay(5000).fadeIn(); 
     localStorage.setItem('popState','shown') 
    } 

    $('#popup-close').click(function(e) // You are clicking the close button 
    { 
    $('#popup').fadeOut(); // Now the pop up is hiden. 
    }); 
    $('#popup').click(function(e) 
    { 
    $('#popup').fadeOut(); 
    }); 
}); 

HTML/CSS является:

<div style="display:none; width:50%; height:50%; background-color:blue; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:1000;" id="popup"><p>Testing Newsletter Box</p><p>Click to close</p></div> 

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

Answer 1

Фокус и unfocus элемент

$(document).ready(function() { 
if(localStorage.getItem('popState') != 'shown'){ 
    $("#popup").delay(5000).fadeIn(); 
    $("#popup").focus(); //Focus when visible 
    localStorage.setItem('popState','shown') 
} 
$('#popup-close').focusout(function(){ 
    $('#popup').fadeOut(); //When focus lost, fadeout 
}); 
$('#popup-close').click(function(e) // You are clicking the close button 
{ 
$('#popup').fadeOut(); // Now the pop up is hiden. 
}); 
$('#popup').click(function(e) 
{ 
$('#popup').fadeOut(); 
}); 
});