Zerolines.js

Modal

Basic Structure

Modal component requires modal-toggle, modal-backdrop, and modal-content like as below. You don't need to hide the modal window by CSS, as Zerolines.js automatically hides it. modal-dismiss is optional. 

<button type="button" data-zl="modal-toggle target-[#modal1]">
  Modal Open
</button>
<div id="modal1" data-zl="modal-backdrop" zl-cloak>
  <div data-zl="modal-content move-down-md">
    <!-- Content Here -->
    <button data-zl="modal-dismiss">Cancel</button>
  </div>
</div>

modal-toggle

Item Description

target-[SELECTOR]

*required

Specify the target element to open. Put a CSS selector value between [ and ]. Double Quatation is not required. The target must be only one element.

Example

modal-toggle target-[#targetElementId]

modal-backdrop

modal-backdrop is the background of modal-content. modal-backdrop must be a child(or descendant) or same element of the target element that is specified by modal-toggle option. It's fade in/out with comfortable speed(300ms) by default. If you put a fade speed option to modal-content, this fading speed will be over written.

Item Description

-

-

modal-content

modal-content must be a child(or descendant) element of the target element that is specified by modal-toggle option. Fade speed, move direction, and zooming are able to put in modal-content option. It's fade in/out with comfortable speed(300ms) by default.

move and zoom cannot be used at the same time.

Item Description

Fade Speed

quickly

(optional)

Fade in/out as quick speed.(100ms)

Example

modal-backdrop quickly

slowly

(optional)

Fade in/out as slow speed.(500ms)

Example

modal-backdrop slowly

no-animation

(optional)

No fading.(0ms)

Example

modal-backdrop no-animation

Move Direction

move-down-sm

(optional)

Move down when fading in, move up when fading out, with small moving distance.

Example

modal-content move-down-sm

move-down-md

(optional)

Move down when fading in, move up when fading out, with medium moving distance.

Example

modal-content move-down-md

move-down-lg

(optional)

Move down when fading in, move up when fading out, with large moving distance.

Example

modal-content move-down-lg

move-up-sm

(optional)

Move up when fading in, move down when fading out, with small moving distance.

Example

modal-content move-up-sm

move-up-md

(optional)

Move up when fading in, move down when fading out, with medium moving distance.

Example

modal-content move-up-md

move-up-lg

(optional)

Move up when fading in, move down when fading out, with large moving distance.

Example

modal-content move-up-lg

move-right-sm

(optional)

Move right when fading in, move left when fading out, with small moving distance.

Example

modal-content move-right-sm

move-right-md

(optional)

Move right when fading in, move left when fading out, with medium moving distance.

Example

modal-content move-right-md

move-right-lg

(optional)

Move right when fading in, move left when fading out, with large moving distance.

Example

modal-content move-right-lg

move-left-sm

(optional)

Move left when fading in, move right when fading out, with small moving distance.

Example

modal-content move-left-sm

move-left-md

(optional)

Move left when fading in, move right when fading out, with medium moving distance.

Example

modal-content move-left-md

move-left-lg

(optional)

Move left when fading in, move right when fading out, with large moving distance.

Example

modal-content move-left-lg

Zooming

zoom-in-sm

(optional)

zoom-in when fading in, zoom-out when fading out, with small change.

Example

modal-content zoom-in-sm

zoom-in-md

(optional)

zoom-in when fading in, zoom-out when fading out, with medium change.

Example

modal-content zoom-in-md

zoom-in-lg

(optional)

zoom-in when fading in, zoom-out when fading out, with large change.

Example

modal-content zoom-in-lg

zoom-out-sm

(optional)

zoom-out when fading in, zoom-in when fading out, with small change.

Example

modal-content zoom-out-sm

zoom-out-md

(optional)

zoom-out when fading in, zoom-in when fading out, with medium change.

Example

modal-content zoom-out-md

zoom-out-lg

(optional)

zoom-out when fading in, zoom-in when fading out, with large change.

Example

modal-content zoom-out-lg

modal-dismiss

modal-dismiss closes the target element that specified by modal-toggle option.