JQuery Hide Drop Down on Click

JQuery Hide Drop Down on Click

Okay, so, I made this in the past (with a bit of help...) and I'm back to using it again, however, I used it for notifications etc.


Now, I'm attempting to use it for a login form. I am sure there is better ways of going about this, but I am at a loss for doing those...

When I click on a form item, it closes the popup window. I know how it does that, I'm trying to figure out how to fix this so that whenever they click outside the box it closes but not when they click inside of it...


  1. <div id="notify" style="display: inline; position: relative;">
  2.                   <a href="#">Login</a>
  3.                   <br />
  4.                   <div id="shownotify" class="login-dropdown">
  5.                     <form action="login.php" method="post">
  6.                       <input class="login-box" type="text" name="email" size="30" placeholder="Username"><br />
  7.                       <input class="login-box" type="password" name="password" size="30" placeholder="Password"><br />
  8.                       <input type="submit" value="Log In">
  9.                     </form>
  10.                   </div>
  11.                 </div>
  12.                 <script>
  13.                   $( "#notify" ).click(function() {
  14.                     $( "#shownotify" ).toggle( "slow" );
  15.                   });
  16.                   $(document).click(function(event) { 
  17.                     if($(event.target).parents().index($('#notify')) == -1) {
  18.                       if($('#shownotify').is(":visible")) {
  19.                         $('#shownotify').toggle( "slow" )
  20.                       }
  21.                     }        
  22.                   });
  23.                 </script>