# overlay

### Basic Usage

The basic purpose of an Overlay is to be an alternative to Modal's when the content needs to be presented full-width. By default, the Overlay's backdrop is white instead of black like a modal. Overlay's can accept any content or component.

# Some Background Title

Morbi quis lorem ac diam tincidunt sollicitudin. Fusce elementum diam hendrerit euismod malesuada. Sed eget risus feugiat, pharetra nisl ut, dictum enim. Aenean commodo efficitur malesuada. Phasellus ac molestie arcu. Donec semper lacus ut massa tristique, porttitor mollis erat sagittis. Duis non rutrum orci, eget fringilla mi.

Maecenas porta convallis ullamcorper. Ut vulputate nec orci eget ultrices. Curabitur euismod lectus tellus, ut luctus ligula aliquet non. Cras consequat vestibulum sem id luctus. Curabitur porttitor nec diam vel efficitur. Praesent id aliquam metus. Sed egestas diam sit amet odio molestie tempus. Aenean id ex mi. Nam nisl quam, ultrices id viverra a, lobortis et augue. Proin laoreet iaculis tellus id euismod. Etiam semper tempor ipsum, a aliquam metus convallis ut. Maecenas sit amet neque eget est sollicitudin lobortis non ut nisi. Cras eros enim, feugiat sed condimentum imperdiet, commodo non dolor. Mauris non mi feugiat, lobortis lectus in, viverra metus. Morbi dignissim suscipit orci, in vehicula libero faucibus in.

<overlay>

## Some Overlay Title

This is some overlay content.

</overlay>

### Targets

Most of the time you want to use an overlay, its triggered to show by doing something. You can bind the modal to open/close with any element event. The default trigger is a `click`.

Click to show modal

### Basic Overlay

This is an overlay. It has no functionality by default, except a close button (which can be disabled).

### Triggers

You can change the event trigger used open the modals. This example will use the focus/blur events to toggle the modal.

Focus on me

### Overlay Triggered by Focus

This overlay was shown on focus (triggered from the target elements).