-1

I have some code which brings up a pop-up after a timer is met. Currently the code is designed so that when you click the element it closes, I just want to reverse this so that when you click off the element (anywhere else on screen) that it closes.

Thanks in advance for any help. 

    <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(); 
    });
});

The HTML/CSS is:

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

This is not a menu or a click-on, click-off event. It is a pop-up which appears on its own and once turned off cannot be brought back again so is not the same as previous questions.

Ryan Malone
  • 7
  • 6

1 Answers1

0

Focus and unfocus element 

$(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(); 
});
});
Rehban Khatri
  • 924
  • 1
  • 7
  • 19