Sandbox: JavaScript

Hides or removes an element when the user clicks outside of it.

Example

Click anywhere on this page outside of the box below and the box will be removed. Click anything inside the box (the box itself, the button) and it will remain.

<div class="box" data-behavior="ClickOutToHide">
  <a class="btn btn-default">I'm a button!</a>
</div>

Usage

Via data attributes

<div data-behavior="ClickOutToHide">some stuff</div>

Behavior Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-clickouttohide-destroyelement="false".

Name type default description
useEscapeKey boolean true If true will also hide the element if the user hits the esc key.
destroyElement boolean false If true the element is removed from the DOM entirely.