Grow your CSS skills. Land your dream job.

Click outside to close login box

  • # June 25, 2014 at 4:41 am

    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

    # June 25, 2014 at 5:47 am
    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: http://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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".