--- 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
Title Bar
Close Done

Ok Cancel

Basic HTML

You can create a Modal with this basic 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

Open modal ×
Open modal ×

Sizing Class

Use these classes to affect the width of the Modal

tiny: 300px small: 500px medium: 600px (default) large: 800px

Angular

Foundation has some great helpers that foster better interaction between elements.

Custom Helpers

zf-close

zf-close looks for a parent element that has the zf-closeable tag on it. This tag is added automatically for all directives that can be closed with zf-close. When clicked, the directive will send a message via the FoundationApi to close its parent zf-closeable element.

×

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).

× zf-open

The counter to zf-close, zf-open sends a signal to a directive that can be trigger through this method. Simply specify the ID of the target element.

Open Modal zf-toggle

Similar to the previous two, zf-toggle sends a toggle command to a directive that can accept it. A target has to be specified in order for it to work.

Toggle Modal

Sass Mixins

Write a modal with a custom class using our Sass mixins. Note that the class for the modal overlay can't be changed.

.custom-modal { // Extend the base modal class to get core structural styles @extend %modal; // Use the layout mixin to define the modal's width @include modal-layout( $width: 300px // Can be an absolute value or percentage ); // Use the style mixin to define the modal's visual style @include modal-style( $border: 1px solid black, $radius: 10px, // Border radius $shadow: 0 4px 10px #000 // Box shadow ); }

Sass Variables

You can customize with the Sass variables in the _settings.scss file:

$modal-background: #fff !default; $modal-border: 0 !default; $modal-radius: 0px !default; $modal-shadow: none !default; $modal-zindex: 1000 !default; $modal-sizes: ( tiny: 300px, small: 500px, medium: 600px, large: 800px, ) !default; $modal-overlay-class: 'modal-overlay' !default; $modal-overlay-background: rgba(#333, 0.7) !default;