--- name: modal url: /modal --- ## Modal

Modal dialogs, or pop-up windows, are handy for prototyping and production. It focusses the user on the modal content. You can add images, links, and even a grid inside.

Open modal ×
*** ### Basic HTML You can create a Modal with this basic HTML
```html Open modal ×

Back in my days...

There were 3 Star Wars movies and Disney only made cartoons.

```
Open modal ×

Back in my days...

There were 3 Star Wars movies and Disney only made cartoons.

### Advanced HTML You can trigger the Modal close & open with a link or button
```html Open modal ×

Add a button to close the modal.

Ok Cancel
```
Open modal ×
### Sizing Class Use these classes affect the width of the Modal ```html tiny: 300px small: 500px medium: 600px (default) large: 800px ``` *** ### Angular

Foundation has some great helpers that foster better interaction between elements. #### Custom Helpers **fa-close** fa-close looks for a parent element that has the `fa-closeable` tag on it. This tag is added automatically for all directives that can be closed with `fa-close`. When clicked, the directive will send a message via the FoundationApi to close its parent `fa-closeable` element. ````html × ```` Note that you can specify the ID of a specific closeable directive in order to close it remotely (whether it's a parent, child, or has any other relationship to the closeable directive). ````html × ```` **fa-open** The counter to `fa-close`, `fa-open` sends a signal to a directive that can be trigger through this method. Simply specify the ID of the target element. ````html Open Modal ```` **fa-toggle** Similar to the previous two, `fa-toggle` sends a toggle command to a directive that can accept it. A target has to be specified in order for it to work. ````html Toggle Modal ```` ### Sass Variables You can customize with... ```scss $modal-background: #fff; $modal-border: 0; $modal-radius: 0px; $modal-shadow: none; $modal-zindex: 1000; $modal-sizes: ( tiny: 300px, small: 500px, medium: 600px, large: 800px,); ```