Files

• _modals.scss
• modals.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/modals

Module Overview

Examples

<a href="#modal-demo-1">Click Me</a>

<div class="modal" id="modal-demo-1">
    <div class="modal_close"><i class="fa fa-times"></i></div>
    <div class="modal_content">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Animations

Animate - Left

<a href="#modal-demo-2">Click Me</a>

<div class="modal-animate-left" id="modal-demo-2">
    ...
</div>

Animate - Right

<a href="#modal-demo-3">Click Me</a>

<div class="modal-animate-right" id="modal-demo-3">
    ...
</div>

Animate - Top

<a href="#modal-demo-4">Click Me</a>

<div class="modal-animate-top" id="modal-demo-4">
    ...
</div>

Animate - Bottom

<a href="#modal-demo-5">Click Me</a>

<div class="modal-animate-bottom" id="modal-demo-5">
    ...
</div>

Animate - Zoom

<a href="#modal-demo-6">Click Me</a>

<div class="modal-animate-zoom" id="modal-demo-6">
    ...
</div>

Animate - Spin

<a href="#modal-demo-7">Click Me</a>

<div class="modal-animate-spin" id="modal-demo-7">
    ...
</div>

Animate - Spin & Zoom

<a href="#modal-demo-8">Click Me</a>

<div class="modal-animate-spin-zoom" id="modal-demo-8">
    ...
</div>

Using Data Attributes

<a href="#modal-demo-9" data-modal data-modal-content="Lorem ipsum dolor sit amet.">Click Me</a>

Custom Animation Style

<a href="#modal-demo-10" data-modal data-modal-content="Lorem ipsum dolor sit amet." data-modal-style="zoom">Click Me</a>

Customizing

The modals can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
default-animation	left	The default animation style modals should use (top, bottom, left, right, spin, zoom).
background	color('greyscale', 'grey-1')	The background of modal boxes.
text-color	base('text-color')	The text color of modal boxes.
radius	0	The border radius of modal boxes.
z-index	9	The z-index for modal boxes.
content-padding	2em	The padding for the modal content.
close-icon-size	font-size('size-3')	The font-size for the close icon.
close-icon-color	color('greyscale', 'grey-3')	The color for the close icon.
close-icon-hover-color	color('brand', 'primary')	The hover color for the close icon.
close-icon-position	(1rem, 1rem)	The (top, right) position for the close icon.

To change one of the above values, pass your new value(s) to the modals() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include modals((
    'background-color'  : rgba(white, 0.8),
    'radius'            : 0.4em,
    'close-icon-size'   : 2em
));