Can't get JQuery show to work

I'm a beginner with javascript and I just can't seem to figure something out.

I'm trying to show an overlay div using jquery. Here's what I have

$("#loginbutton").click(function() {
    alert('Ola');
    $('#overlay').show();
    return false;
  });

The accompanying css for the overlay

#overlay {
z-index:1000;
position:fixed;
top:0;
bottom:0;
left:0;开发者_如何学Go
width:100%;
height:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
visibility:hidden;
}

Pressing the login button will show the alert but not the div. Has anyone got a clue why this is not working?

Thanks

Change visibility:hidden to display:none

I believe the $.show() function is shorthand for the display:block attribute which would replace your display:none

However, if you have visibility:hidden then it will remain hidden

You could try:

display:none;

instead of

visibility:hidden;

display:none should work fine

you may but this calling for click event when document is completely loaded so try

  $(document).ready(function(){
     $("#loginbutton").click(function() {
       alert('Ola');
       $('#overlay').show();
       return false;
     });
   )};