Javascript popup not closing upon clicking out of an area

Question

On a tumblr blog, I want to make it so when you click outside of a jquery popup, it closes. Basically, how it's setup right now is when you click on the "ask" link, it pops up with the form to submit the ask. However, right now when I click anywhere, it does nothing. I'm using this script and here is a snippet of it:

<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

Answer 1

I made a function for this

// window click function
function OnwindowClick(elem , action){
    $(document).on('click',function(e){
        if (!$(elem).is(e.target) // if the target of the click isn't the container...
            && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
        {
            action();
        }
    });
}

and you can use it like

OnwindowClick('button , yourpopup .Class or #Id', function(){
   // hide the popup
});

ُSimple Example

 $(document).ready(function(){ $('.showpopup').on('click' , function(){ $('#popup').fadeIn(); }); OnwindowClick('.showpopup , #popup', function(){ $('#popup').fadeOut(); }); }); // window click function function OnwindowClick(elem , action){ $(document).on('click',function(e){ if (!$(elem).is(e.target) // if the target of the click isn't the container... && $(elem).has(e.target).length === 0) // ... nor a descendant of the container { action(); } }); } 

 #popup{ position : fixed; padding : 50px; text-align : center; font-size: 30px; margin : 30px; border: 5px solid #eee; background : yellow; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="showpopup">Show PopUp</button> <div id="popup"> This is a Pop Up </div> 

Answer 2

It sounds like you want a "modal" popup. Since you are using JQuery, this is easily done using the Jquery UI dialog, for example:

        $( "#your_id" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });

If you google "jquery ui dialog" you can find full instructions.