Basic Popup window not working properly

Question

Having a small problem with a popup window I am trying to create.

When a button(anything with a certain ID) is clicked it should open(this seems to work) but then when it is open I want it so if you click on anything but the main popup window it should close.

But it does not seem to close when I click on the .overeverythingCover which has width: 100% and height: 100%;

http://jsfiddle.net/mnW7U/

$('#activatePopOver, .overeverythingCover').click(function() {
        popUpOverEverything();
   });

---

function popUpOverEverything(data) {
    // if exists | remove it
    if ($('.overeverythingCover').length) {
        $('.overeverythingCover').empty();
        $('.overeverythingCover').removeClass();
        $('body').css('overflow', 'scroll');
        console.log("hehe");
    } else {
        $('body').append('<div class="overeverythingCover"</div>');
        $('.overeverythingCover').append('<div class="overEverything"</div>');
        $('body').css('overflow', 'hidden');
        $('.overEverything').html(data);
    };
}

Thank you!

Answer 1

You can't use "click" handler to an element which not exist yet. You can use .live :

$(function() {
    $('#activatePopOver, .overeverythingCover').live('click', function() {
        popUpOverEverything();
   });

    function popUpOverEverything(data) {
        if ($('.overeverythingCover').length > 0) {
            $('.overeverythingCover').remove();
            $('body').css('overflow', 'scroll');
        } else {
            $('body').append('<div class="overeverythingCover"</div>');
            $('.overeverythingCover').append('<div class="overEverything"</div>');
            $('body').css('overflow', 'hidden');
            $('.overEverything').html(data);

            // Just close when you click outside the popup
            $('.overEverything').click(function(event){
                event.stopPropagation();
            });
        };
    }
});

See the Fiddle : http://jsfiddle.net/mnW7U/3/

Answer 2

use a delegate event listener such as:

$(document).on("click", '#activatePopOver, .overeverythingCover', function() {
    popUpOverEverything();
});

Like The Wobbuffet mentioned, the issue is that the .overerverythingCover div isn't on the page at the time you're binding your event.

NOTE: This will only work with jQuery 1.7+

for older versions you can use .delegate()

Answer 3

The problem was that you are binding a click event to an element that not yet exists on the page.

I have updated your fiddle with a simple to understand example: http://jsfiddle.net/mnW7U/2/

I created a popDown() function that gets bound with the following function when the button is clicked:

 $('.overeverythingCover').click(function() {
      popDown();
 });

Answer 4

The problem is this:

$('body').append('<div class="overeverythingCover"</div>');

It is being appended after the click event is added to it. Try adding it to the dom (none-js in the html) then messing with it's display property.