Click outside to close login box

[AsteroidMonkey]

Hi,

Couple of questions and this Pen….

1. When the page opens the login pop out is already, you know, popped out. How would I set it so that it is hidden upon page open?
2. How would I set it so that you can click outside of the login box (anywhere on screen) to close it instead of having to press the sign in button to close?

Many thanks,
Marc

[clokey2k]

1. Toggle it before the user does on page load / DOM ready $('#login').toggle();. You could set it to `display: none’ in CSS but if JavaScript is disabled they’ll never see the login box.

2. See: https://css-tricks.com/dangers-stopping-event-propagation/ and there is a small section that has a snippet:

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

Which basically says “if the user didn’t click within #menucontainer then // Hide the menus“.

Enjoy

[Author]

Posts