The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Click outside to close login box

  • # June 25, 2014 at 4:41 am


    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,

    # 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: and there is a small section that has a snippet:

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

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


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed