How To Close An Element When Clicked Outside

Question

Hello i have a side bar that i wont to close when someone clicks outside of it.

Im brand new to jquery.

Here is what i currently have. Right now you click on an X which is a div called .exit to close the element.

  $('.icon-hamburger').click(function() {
    $('.hamburger').show();
  });

  $('.exit').click(function() {
      $('.hamburger').hide();
    });

How would a jquery master do this?

Possible Duplicate [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Spencer Wieczorek, Sep 07 '15 at 06:43

score 0 · Answer 1 · answered Sep 07 '15 at 06:25

The way to to do this is the following.

  $('.icon-hamburger').click(function() {
    $('.hamburger').show();
    $('.navigation-overlay').show();
  });

(function (global) {
  function closeModal () {
    $('.hamburger').hide();
    $('.navigation-overlay').hide();
  }

  $(document).on('click', '.exit', closeModal)
  $(document).on('click', '.navigation-overlay', closeModal)
})(window);

I added a grey overlay div called .navigation-overlay

The css for this is

.navigation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    z-index: 9;
    opacity: .5;
    display: none;
}

How To Close An Element When Clicked Outside

1 Answers1