0

Code:

$(document).ready(function() {
$('a.data-window').click(function() {

    //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the mask layer the popup closed
$('#mask').live('click', function() { 
  $('#mask , .data-popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});
});

I have this piece of code which creates popup box with black mask. That part works ok, but what doesn't work is the part where all this should vanish when I click outside the box, on the black mask. Why won't it close?

BloodDrunk
  • 95
  • 1
  • 8
  • Possible duplicate of [jQuery UI - Close Dialog When Clicked Outside](http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside) – MoralCode Jan 31 '16 at 20:38
  • FYI the proper term for what you're describing is a modal or modal dialog. – j08691 Jan 31 '16 at 20:42

1 Answers1

0

This could be due to the jQuery version you are using. The "live" function is deprecated in the latest version. Try using "on" function or "delegate" function instead of live functions. Hope this helps.

Shehan Thamel
  • 140
  • 8
  • I tried to use .delegate but no success. I still don't know and can't figure out what exactly is the issue.. – BloodDrunk Feb 02 '16 at 19:51