CODEWITHSUNDEEP
javascriptjqueryhtml
user3815283
user3815283

Reputation: 51

Popup window not showing div

I have this JQuery code:

function JQueryPopup(value) {
    $(value).toggle();

    $('#JQueryClose').click(function(){
        $(value).hide();
    });

    $( document ).on( 'click', function ( e ) {
        $(value).hide();
    });

    $( document ).on( 'keydown', function ( e ) {
        if ( e.keyCode === 27 ) { // ESC
            $(value).hide();
        }
    });
}

and a HTML button that calls this function, it doesn't seem to be showing the popup window/div.

here is a fiddle with my full code: http://jsfiddle.net/XHLY8/3/

P.S. i do have this code on another page, i call the function like this:

<script type="text/javascript">JQueryPopup('#customer_popup_notes');</script>

which works fine.

Upvotes: 0

Views: 142

Answers (2)

fbynite
fbynite

Reputation: 2661

You need to add the following:

$('#inbox_button').on('click', function(event){
  event.preventDefault(); // This isn't critical, but you would need 
  event.stopPropagation();
  JQueryPopup('#inbox_div');
});

You want to stop the click event from bubbling up and triggering the following:

$( document ).on( 'click', function { ... });

Otherwise your #inbox_div will be hidden before you can see it.

Here is a working fiddle.

I suggest reading up on stopPropagation and preventDefault.

Upvotes: 2

Pratik Joshi
Pratik Joshi

Reputation: 11693

You dont need 

$( document ).on( 'click', function ( e ) {
        $(value).hide();
    });

Which always hides the Bottom div no matter where u click .

Working fiddle

Upvotes: 0

Related Questions